Ionic React -页面加载时查询参数为空

tez616oj 于 2022-12-09 发布在 Ionic

关注(0)|答案(1)|浏览(135)

我在React中遇到了导航逻辑问题，如果能得到一些帮助，那就太好了。
我有用TypeScript、React和Ionic Framework V5编写的前端Web应用程序。
该应用程序有一个相当标准的搜索框，可以重定向到位置为/search?query={query here}的结果页面。
当我点击搜索按钮时，导航由React Router处理。我被重定向到结果页面&搜索查询出现在浏览器的地址栏中，但当在功能组件逻辑中获取查询字符串时，查询字符串为空-给我的搜索结果不正确。
搜索框将按如下方式转到结果页面：

<IonButton fill="clear" className="search-button" routerLink={`/search?query=${searchValue}`}>
  <IonIcon name="search-outline" />
</IonButton>

请注意，routerLink属性只是React Router的一个Ionic助手，如果我将按钮封装在普通的<Link/>标记中，问题也是一样的。

在搜索页上，查询字符串的读取方式如下：

const Home: React.FC<SimplePageProps> = ({ axios }) => {
  const queryParams = useQuery();
  const param = queryParams.get('query');

  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios.get(`/products?query=${param}`)
      .then((response) => {
        const data = camelcaseKeys(response.data, { deep: true });
        setProducts(data.items.map((product: Product) => (
          <IonCol key={product.id} size-md="4" size-xl="3">
            <ProductCard product={product} />
          </IonCol>
        )));
      })
      .catch((error) => {
        // TODO show error element
        console.error(error);
      });
  }, [axios, param]);

如前所述，当在功能组件逻辑中获取查询字符串时，它是空的--给了我不正确的搜索结果。当我刷新页面时，查询字符串不是空的，搜索结果出现了。有什么想法吗？
提前感谢！

ionic-framework

来源：https://stackoverflow.com/questions/72454343/react-query-parameters-are-empty-on-page-load

1条答案

按热度按时间

brgchamk1#

在睡了一觉&又搜索了一些之后，我设法解决了这个问题。
我的解决方案是将内容剥离为一个普通的JavaScript命令window.location.search，它总是从URL中获取正确的查询参数，而React Router辅助钩子在第一次路由到页面时将是undefined。
useLocation()，以便在从结果页面执行另一个搜索时，React组件重新呈现以反映新的查询字符串。

const Home: React.FC<SimplePageProps> = ({ axios }) => {
  // parse query string parameter
  const { search } = window.location;
  const query = new URLSearchParams(search).get('query');

  useLocation(); // including this forces a re-render when the URL changes

  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios.get(`/products?query=${query}`)
      .then((response) => {
        const data = camelcaseKeys(response.data, { deep: true });
        setProducts(data.items.map((product: Product) => (
          <IonCol key={product.id} size-md="4" size-xl="3">
            <ProductCard product={product} />
          </IonCol>
        )));
      })
      .catch((error) => {
        // TODO show error element
        console.error(error);
      });
  }, [axios, query]);

赞(0）回复(0）举报 2022-12-09

我来回答

Ionic React -页面加载时查询参数为空

1条答案

相关问题

热门标签

最新问答