如何停止变量在上下文中重新初始化

Question

我的上下文中有一个变量，我的 api 的基数 url 并且我向该基数调用添加参数以添加参数，我遇到的问题是我不能一次连接多个参数，因此如果例如为一个品牌设置我的复选框 url 更新到该品牌过滤器并且函数添加品牌过滤器参数，但是如果我搜索某些东西 url重新初始化自身并删除其他参数。

一些图片更清晰：如果我进行搜索：

url 控制台记录如下，第 87 行在我连接参数之前记录了 url，在我连接参数之后记录了 91：

如果我检查应该只显示 Nike Air Yeezy 产品的 Nike 品牌，url 应该是“http://localhost:5000/api/v1/products?name=Yeezy&company=Nike”只是“http://localhost:5000/api/v1/products?company=Nike&”

我的理论是，当我每次执行一个函数时声明基本 url 参数时，上下文会重置并且 url var 会重新初始化，但我该如何停止呢？我搜索了如何创建字符串状态并连接该状态，但找不到任何内容。

这是我处理新 api 调用的上下文部分，如果看起来有些东西 weird/missing 是因为我删减了上下文以使其更清晰

  var url = "/api/v1/products?";
  const [productList, setProductList] = useState([]);
  const [brandFilter, setBrandFilter] = useState([]);
  const [search, setSearch] = useState({
    text: "",
  });

  const getProductList = async () => {
    const response = await fetch(url);
    const responseJson = await response.json();
    if (responseJson) {
      setProductList(responseJson.products);
    }
  };



  useEffect(() => {
    getProductList();
  }, []);



  useEffect(() => {
    setSearchUrl();
    getProductList();
  }, [search]);

  const setBrandUrl = () => {
    console.log(url);
    if (brandFilter.length > 0) {
      for (var i = 0; i < brandFilter.length; i++) {
        url += `company=${brandFilter[i]}&`;
      }
    }
    console.log(url);
  };

  const setSearchUrl = () => {
    console.log(url);
    if (search.text != "") {
      url += `name=${search.text}`;
    }
    console.log(url);
  };

  useEffect(() => {
    setBrandUrl();
    getProductList();
  }, [brandFilter]);

Answer 1

这是因为您将 useEffect 一分为二；一个对 search 变化做出反应，一个对 brands 变化做出反应。你需要把它们合二为一。

如果我们查看 search 更改时的效果，并将代码缩减为实际运行，您的效果是这样的：

useEffect(() => {
  var url = "/api/v1/products?";

  if (search.text != "") {
    url += `name=${search.text}`;
  }

  getProductList();
}, [search]);

即它完全忽略了 brandsFilter。您需要将 brandsFilter 和 search 作为单一效果的依赖项：

useEffect(() => {
  let url = "/api/v1/products?";

  if (search.text) {
    url += `name=${search.text}`;
  }

  if (brandsFilter.length) {
    const brands = brandsFilter.map(b => `&brand=${b}`).join('');
    url += search.text ? brands : brands.substr(1);
  }

  // NOTE: pass the 'url' to the get as a parameter here!
  getProductList(url);
}, [search, brandsFilter]);

注意：如果您使用像 query-string 这样的库来为您完成繁重的工作，这会更容易：

import qs from 'query-string';

useEffect(() => {
  const url = qs.stringifyUrl({
    url: "/api/v1/products?",
    query: {
        name: search.text || undefined,
        brands: brandsFilter,
    }
  });

  getProductList(url);
}, [search, brandsFilter]);

如何停止变量在上下文中重新初始化

How to stop variable re initializing in context

reactjs

use-context