web-dev-qa-db-fra.com

comment définir un tableau d'état à l'aide de hooks de réaction

Merci d'avance. J'ai un tableau d'état comme ci-dessous.

J'ai besoin d'ajouter un élément au tableau d'état, je suis tombé sur que nous n'avons pas besoin de faire de mutation d'état. Comment définir l'état avec 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'
                }
            }]
    )

Comment appeler l'état défini pour ajouter ce tableau d'états.

Quelque chose comme ça?

setMessages(previousState => ({...stat

Quelqu'un peut-il m'aider à obtenir le code de ligne ci-dessus.

reactjsreact-nativereact-hookssetstate
2
Ankit Jayaprakash

Pour insérer un nouvel élément à la fin de la liste

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

Insérer un nouvel élément au début de la liste

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

Il n'y a pas vraiment besoin d'utiliser le prevState, vous pouvez simplement faire:

setMessages([...messages, newMessage])
1
Konstantin

Votre état est un tableau, vous devrez donc répartir votre état précédent dans un nouveau tableau et ajouter le nouveau message à l'aide de [...prevState, newMessage]

Ce que vous essayez de faire est de renvoyer un objet, car {} est un bloc de code, vous devez donc l'envelopper à l'intérieur () si vous retournez un objet qui est ce que vous essayez de faire

setMessages(prevState => [...prevState, newMessage])
1
Asaf Aviv

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

0
Ankit Jayaprakash

Pour une meilleure lisibilité et probablement un contrôle sur votre état, je procéderais comme suit:

Créez une variable contenant une copie de l'état réel:

Si l'état est un tableau et que vous devez y ajouter un élément

let newState = [...messages];
newState.Push(1);
setMessages(newState);

Si l'état est un objet et que vous devez mettre à jour une propriété dedans

let newState = Object.assign({}, message);
newState.name = 'Michael Scott';
setMessages(newState);
0
Astrit Spanca