javascript - setState 钩子(Hook)中的 Mutate prevState 更新 View 而不重新渲染。为什么？

Question

我的 changeProductName 函数称为 setState，它返回一个“变异的 prevState”。我通过 ContextAPI 将函数传递给并在子组件中调用它。该函数成功更新了子项和父项中显示的产品名称，但父项确实触发了重新渲染。父级如何在不重新渲染的情况下更新 View ？谁能解释一下 setState 中的 prevState 实际上是什么？

const App = () => {
  const [products, setProducts] = useState(initialValues);

  const changeProductName = (id, newName) => {
    setProducts((prevState) => {   //is preState a copy of state?  
      prevState.products.filter(
        (product) => product.id === id 
      )[0].name = newName;        //Mutates prevState
      return prevState;           //Did I return a new state?
    });
  };

  useEffect(() => 
    console.log("I would know when App re-renders")); //No re-render!

  return (
    <>    //Some React Switch and Routers 
    <div>
      {product.map(product=>product.name)}   //Successfully Updated!
    </div>
    <ProductContext value={(products, changeProductName)}> 
      <ProductPage />     //call changeProductName and it works!
    </ProductContext>
    </>   
  ); 
};

如果我更改函数而不触及 prevState，父级将按预期重新呈现。这种方法更好吗？

  //this will trigger parent re-render.
  const changeProductName = (id, newName) => { 
    setProducts((prevState) => {
      prevState.products.filter(
        (product) => product.id === id
      )[0].name = newName;
      return prevState;
    });
  };

Answer 1

Can anyone explain what the prevState actually is in setState?

prevState 是对前一个状态的引用。它不是状态的副本，它是状态内部对象的引用。因此更改该对象不会改变对象引用。

因此不应直接对其进行突变。相反，更改应该通过基于 prevState 的输入构建一个新对象来表示。

例如，如果您在 changeProduct 名称中进行检查，例如:

setProducts(prevState => {
  prevState.filter(product => product.id == id)[0].name = newName;
  console.log(prevState === products); // This will console true
  return prevState;
}); 

此外，当您使用钩子(Hook)时，当您编写 setProducts((prevState) => { prevState.products}... prevState 本身已经是产品. 因此，当您尝试访问 .products 时，您的示例中会出现未定义的错误。

所以我建议你这样做:

  const changeProductName = (id, newName) => {
    setProducts(prevProducts =>
      prevProducts.map(product =>
        product.id === id ? { ...product, name: newName } : product
      )
    );
  };

.map会根据prevState构建一个新的数组，并更改函数中调用的id的商品名称。