使用React Hooks附加到React数组状态的正确方法

Question

我试图在React中实现一个简单的消息历史记录。

我想使用一个useEffect挂钩，它将取决于sentMessage状态。在触发效果时，我想在消息的历史记录中添加已发送消息的新值。

然而，如果我理解得很好的话，使用setHistoryState((prevValue) => prevValue.push(sentMessage)不是正确的方法，因为historyState不在依赖项中。

实现这一点的正确方法是什么？

Answer 1

不需要在useEffect的依赖项中有historyState来调用setHistoryState。所以我认为你可以做一些类似的事情：

useEffect(() => {
setHistoryState(prevValue => [...prevValue, sentMessage]);
}, [sentMessage]);

这意味着，每次sentMessage更改其值时，都会在historyState中推送新值。

Answer 2

据我所知，你的问题可能来自prevValue.push会改变你的状态这一事实"prevValue"；。这不是一种重新命令的操纵状态的方式。

您可以通过这种方式更改您的状态=>

setHistoryState((prevValue) => ([...prevValue, sentMessage]))

看看"；避免+突变+js"；在谷歌上。

Answer 3

您可以扩展现有的历史记录，并使用其值创建一个新的数组，在过程中添加一个新元素。

// historyState is an array here
const [historyState, setHistoryState] = useState([1,2,3])
setHistoryState(history => [...history, newValue]);

https://codesandbox.io/s/cocky-browser-v8jp0

Answer 4

您可以像一样复制它

setHistoryState((prevValue) => {
const value = JSON.parse(JSON.stringiy(prevValue) 
value.push(sentMessage)
return value
}

您可以尝试其他深度复制方式，而不是使用JSON