UseState 在值更改时加载以前的状态 (NextJS)

Question

我正在创建一个电子商务应用程序，我想在商店页面上实现基于类别和价格的过滤器。我这样设置状态：

const [filters, setFilters] = useState({
  cat: "",
  price: "",
});

这是 select 标签和触发类别更改的选项：

<select className="outline-none" name="category" onChange={handleChange}>
  <option value="start">-</option>
  <option value="Hoodie">Hoodie</option>
  <option value="T-Shirt">T-Shirt</option>
  <option value="Sweatshirt">Sweatshirt</option>
</select>

这是handleChange方法：

const handleChange = (e) => {
  const value = e.target.value;
  if (value === "start") {
    setProductsF(products);
  } else {
    setFilters((prevFilters) => ({ ...prevFilters, cat: value }));
    const testArr = [...products];
    const filteredProd = testArr.filter(
      (prod) => prod.categories[0].name === filters.cat
    );
    setProductsF(filteredProd);
  }
}

问题是，当 handleChange 触发时，过滤器获取以前的值并且未正确更新。假设我将值更改为“连帽衫”，然后是“T 恤”。当我点击“连帽衫”时，购物清单是空的，当我点击“T 恤”时，我得到了连帽衫清单。我从静态道具中获取产品，并在此状态下设置过滤产品：

const [productsF, setProductsF] = useState(products);

当用户select有一个选项时，如何获得正确的过滤器值？

Answer 1

您尝试在“更新”后立即使用更新后的 filters 状态。不要忘记 useState 是异步的，就像 class 组件中的 setState 一样。您不能在一行上更新状态并假设它已经在下一行上更改。您可能会使用未更改的状态。

您可以使用收到的 value 而不是 filters.cat。这样你就更新了 filters 和 productsF 状态。

const handleChange = (e) => {
  const value = e.target.value;
  if (value === 'start') {
    setProductsF(products);
  } else {
    setFilters((prevFilters) => ({ ...prevFilters, cat: value }));
    const testArr = [...products];
    const filteredProd = testArr.filter(
      (prod) => prod.categories[0].name === value,
    );
    setProductsF(filteredProd);
  }
};

UseState 在值更改时加载以前的状态 (NextJS)

UseState loads previous state when value changes (NextJS)

javascript

reactjs

next.js

react-hooks

use-state