Как получить и показать все восстановленные данные? - PullRequest
Новая
       19

Как получить и показать все восстановленные данные?

1 голос
/ 11 марта 2020

У меня есть некоторые данные, о которых я могу получить свои данные, когда я нахожусь в oop. Но если я установлю данные в значении массива useState, у меня будет только последнее значение.

Как получить и показать все данные в рендере?

Мой код: 

const [messagesList, setMessagesList] = useState([])

Мой код при использованииЭффект: 

firebase.database().ref(`accounts/${username}/messages/`).on('value', (snapshot) => {
            const jsonData = snapshot.toJSON()
            const keys = Object.keys(jsonData)

            const finalData = keys.map(key => {
                const element = jsonData[key]

                for (const i in element) {
                    const elementFinal = element[i]

                    setMessagesList([elementFinal])
                }
            })
})

Мой код на рендере: 

{messagesList.map((x, i) => (
                <div key={i}>
                    <p key={i}>{x.senderUsername} said "{x.message}"</p>
                </div>
            ))}

Моя база данных Firebase:

Мой результат:

1 Ответ

1 голос
/ 11 марта 2020

Вы стираете значение messageList. Допустим, elementFinal, равный '45' 

setMessagesList([elementFinal])

, приведет к 

messagesList // ['45']

Вам необходимо прочитать предыдущее значение (важна мелкая копия) и установить новое: 

const array = [...messagesList];
array.push(elementFinal);
setMessagesList(array)

РЕДАКТИРОВАТЬ: я не видел, что это может быть уменьшено следующим образом: 

const messages = [];
 const finalData = keys.map(key => {
                const element = jsonData[key]

                for (const i in element) {
                    messages.push(element[i]);
                }
            })
setMessagesList(messages);
...