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

Question

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

我想使用一个取决于sentMessage状态的 useEffect Hook。 触发效果后，我想将已发送消息的新值附加到我的消息历史记录中。

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

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

Answer 1

不需要在useEffect的依赖historyState中有historyState来调用setHistoryState 。 所以我认为你可以这样做：

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

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

Answer 2

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

// historyState is an array here
const [historyState, setHistoryState] = useState([1,2,3])

setHistoryState(history => [...history, newValue]);

Answer 3

从我看来，您的问题可能来自prevValue.push会改变您的状态“prevValue”这一事实。 这不是操纵状态的推荐方式。

你可以通过这种方式改变你的状态 =>

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

看看谷歌上的“避免+突变+js”。

Answer 4

你复制它的样子

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

您可以尝试另一种深度复制方式，而不是使用 JSON