React Hooks 状态更新仅在从组件数组中的回调调用时应用一次

Question

在这种情况下，我无法提升状态：
我有一个按钮，每次点击都会通过“setMyList”将元素添加到“mylist”。这些元素是“子”组件（div className“站点”只是一个 CSS 正方形），我希望每次单击其中一个组件/元素时，由于回调中的“setCount”，它会增加“计数”被赋予“setMyList”中的“子”组件。
但是发生的情况是，例如，我创建一个正方形然后单击它，“计数”不会超过 1，然后创建另一个正方形，单击它会使“计数”上升到 2，但不会更多，等等。
当我点击第一个方形“计数”为 1 时，看起来状态是为每个“子”组件保存的，而不是递增它。

这是我的组件：

import React, { useState } from 'react'
import Child from './Child.js'

function Parent() {
    const [count, setCount] = useState(0);
    const [mylist, setMyList] = useState([])

    function increment() {
        console.log("TEST")
        setCount(count + 1)
    }
  
    return (
      <div className="App">
        <button onClick={() => setMyList([...mylist, <Child onClick={increment}></Child>])}> </button>
        <h2>count {count}</h2>
        {mylist}
        (count should be updated from child)
      </div>
    );
  }
  
export default Parent

请注意，每次单击一个正方形时，它确实会进入“增量”功能，因为控制台日志会显示，但它会通过 setCount 而不做任何事情。

import React, { useState } from 'react'
import "./Site.css"

function Child(props) {
    return (
        <div>
            <div className="Site" onClick={props.onClick}></div>
        </div>
    )
}

export default Child

提前致谢

Answer 1

你应该使用setCount((count) => count + 1);

这将确保setCount 每次都能获取最新的计数值。

这是因为每次推送Child，都会重新创建increment函数，然后increment函数中的count实际上是increment函数为@时的值987654330@.

另外，你可以使用React.useCallback对此进行优化。

const increment = React.useCallback(() => {
  setCount((count) => count + 1);
}, []);