useEffect里面的setState不触发

Question

下面的setProductList似乎不起作用。 newProducts 和 ProductList 上面的 console.log 是不同的，因此 setProductList 应该更改 ProductList 并导致另一个 useEffect 触发，但事实并非如此，第一个 useEffect 不会触发。 setProductList 上面的两个 console.log 显示在控制台中，所以我知道我的代码正在访问 setProductList。

const [productList, setProductList] = useState(filteredProducts);

  useEffect(() => {
    console.log('updating product list...');
  }, [productList]);

  useEffect(() => {
    const cookieLogin = Cookies.get('login');
    if (cookieLogin === undefined) {
      const newProducts = filteredProducts.filter(filterAssociateOnly);
      console.log(newProducts);
      console.log(productList);
      setProductList(newProducts);
    }
  }, [login]);

Answer 1

React 通过检查其浅层相等性来评估状态变化。由于

newProducts

源自

filteredProducts

，React 可能无法识别引用的更改，因此不会触发重新渲染。为了确保重新渲染，请通过将数组分散到新数组中来创建一个新数组：

setProductList([...newProducts]);