简体   繁体   中英

how to set state array using react hooks

Thanks in advance. I have a state array as below.

I need to add an item to state array, I came across that we need not do state mutation. How do i set state with 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'
                }
            }]
    )

How to to i call the set State to append this state array.

Something like this?

setMessages(previousState => ({...stat

Can anyone help me in getting the above line code.

To insert new element at the end of the list

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

To insert new element at the begining of the list

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

More readable and cleaner solution it would be:

Create a variable that holds a copy of the actual state:

If state is an array and you need to add an element in it

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

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

If state is an object and you need to update a property in it

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

or

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

没有真正需要使用 prevState,你可以这样做:

setMessages([...messages, newMessage])

Your state is an array so you will need to spread your previous state into a new array and add the new message using [...prevState, newMessage]

What you try to do is return an object, because {} is a code block so you need to wrap it inside () if you return an object which is what you are trying to do

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM