无法从内容数组 React 内部更新状态

Question

我在React的状态变量中有一个元素列表，我想要渲染。它们内部传递了一个回调函数，用于设置组件的某些状态。似乎这个回调在从子进程调用时运行，但是，父进程中的状态没有更新。代码如下:

setContent(
someFunction(res)
.map(item =>
<Item
key={item.toString()}
toggleOpen={() => {
console.log(myState)
setMyState(!myState)
}}
/>
),
)

如果我将这个列表直接嵌入到返回的JSX中(即我不使用我的content状态变量)，那么它将按预期工作。

相关示例:https://codepen.io/darajava/pen/NWbRYOZ?editors=0010

编辑:如果您注意到console.log和界面中显示的实际状态值之间的差异，您将看到钩子实际上正在工作。问题不像我描述的那样，而实际上是组件没有接收更新的状态值。

Answer 1

您可能需要像这样从toggleOpen返回一些东西，否则它将返回undefined

setContent(
someFunction(res)
.map(item =>
<Item
key={item.toString()}
toggleOpen={() => {
console.log(myState)
return setMyState(!myState) // or {() => setMyState(!myState)
}}
/>
),
)

Answer 2

addcontentin useEffect dependencies:

React.useEffect(() => {
setContent(
<div
onClick={() => {
console.log(ordersOpen)
return setOrdersOpen(x => !x)
}}
>
hi
</div>
)
}, [content])

codepen联系