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

Question

在那种情况下，我无法提升状态：
我有一个按钮，每次单击都会将元素添加到 'mylist' 到 'setMyList'。这些元素是 'Child' 组件（div className“站点”只是一个 CSS 方块），我希望每次单击其中一个 components/elements 它都会递增'count' 感谢 'setCount' 在给 'setMyList' 中的 'Child' 组件的回调中。
但是发生的事情是，例如，我创建一个正方形然后单击它，'count' 不会超过 1，然后创建另一个正方形，单击它会使 'count' 上升到 2但不会更多，依此类推。
当我在第一个方块上单击返回时 'count' 是 1，看起来状态是为每个 'Child' 组件保存的而不是递增它。

这是我的组件：

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

请注意，每次单击一个方块时，它都会进入 'increment' 函数，因为控制台日志会显示，但它会通过 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每次都能得到最新的计数值。

这是因为每次pushChild都会重新创建increment函数，然后increment函数中的count实际上是increment函数为created.

时的值

此外，你可以使用React.useCallback来优化这个。

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

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

React Hooks state update applies only once when called from callbacks in an array of components

javascript

arrays

callback

reactjs