如何使用反應鈎子設置狀態數組

Question

提前致謝。 我有一個如下的狀態數組。

我需要向狀態數組添加一個項目，我發現我們不需要進行狀態突變。 我如何使用 prevState 設置狀態。

const [messages, setMessages] = React.useState(
        [
            {
                _id: 12,
                createdAt: new Date(),
                text: 'All good',
                user: {
                    _id: 1,
                    name: 'Sian Pol',
                }
            },
            {
                _id: 21,
                createdAt: "2019-11-10 22:21",
                text: 'Hello user',
                user: {
                    _id: 2,
                    name: 'User New'
                }
            }]
    )

我如何調用 set State 來附加這個狀態數組。

像這樣的東西？

setMessages(previousState => ({...stat

任何人都可以幫助我獲取上述行代碼。

Answer 1

在列表末尾插入新元素

const addMessage = (newMessage) => setMessages(state => [...state, newMessage])

在列表的開頭插入新元素

const addMessage = (newMessage) => setMessages(state => [newMessage, ...state])

Answer 2

更具可讀性和更清潔的解決方案是：

創建一個保存實際狀態副本的變量：

如果 state 是一個數組並且您需要在其中添加一個元素

const newState = [...messages, 'Hi buddy'];
setMessages(newState);
 
or

setMessages(prevState => [...prevState, "Hi Buddy"]);

如果 state 是一個對象並且您需要更新其中的屬性

const newState = Object.assign({}, message, {name: 'Michael Scott'});
setMessages(newState);

or

setMessages(prevState => {...prevState, name: "Michael Scott" });

Answer 3

沒有真正需要使用 prevState，你可以這樣做：

setMessages([...messages, newMessage])

Answer 4

您的狀態是一個數組，因此您需要將之前的狀態擴展到一個新數組中，並使用[...prevState, newMessage]添加新消息

你試圖做的是返回一個對象，因為{}是一個代碼塊，所以如果你返回一個你想要做的對象，你需要將它包裝在()

setMessages(prevState => [...prevState, newMessage])

Answer 5

setMessages(prevState => [...prevState, newMessage])