Реакция setState на pu sh все элементы в массиве для состояния - PullRequest
Новая
       22

Реакция setState на pu sh все элементы в массиве для состояния

0 голосов
/ 05 августа 2020

, поэтому я пытаюсь загрузить все сообщения чата при загрузке страницы. Сообщения извлекаются точно так же, как я хочу, но у меня ужасное время, пытаясь передать sh их все, я пробовал использовать циклы и c, но ничего не работало. Это код: 

const [name, setName] = useState("")
const [room, setRoom] = useState("")
const [messages, setMessages] = useState([])

const { room, name } = queryString.parse(location.search)
loadMessages(room).then((response) => {
  if (response.error) {
    console.log(response.error)
  } else {
    console.log(response)
    setMessages([
      ...messages,
      { text: response.message, user: response.sender },
    ])
  }
})

Я просто хочу перевести sh каждый объект в массиве ответов в состояние сообщений. Помощь очень признательна!

Ответы [ 2 ]

2 голосов
/ 05 августа 2020

Вам необходимо использовать ловушку useEfect для выборки данных.

Перехватчик эффектов позволяет выполнять побочные эффекты в функциональных компонентах

Выборка данных, настройка подписки, и ручное изменение DOM в компонентах React - все это примеры побочных эффектов. Независимо от того, привыкли ли вы называть эти операции «побочными эффектами» (или просто «эффектами»), вы, вероятно, уже выполняли их в своих компонентах раньше.

https://reactjs.org/docs/hooks-effect.html

Из вашего фрагмента это будет выглядеть примерно так: 

useEffect(() => {
    const messages = async () => 
      await loadMessages(room)
      .then(response => {
          if(response.error) {
            console.log(response.error)
          } else {
            console.log(response)
            setMessages([...messages, 
              {text: response.message,
              user: response.sender}
            ]);
          }
       });
    messages();
}, []);
1 голос
/ 05 августа 2020

если ответ представляет собой массив сообщений, вы должны сопоставить его, а затем установить для него состояние, например: 

setMessages(response.map(item => ({
    text: item.message,
    user: item.sender
  })
));

Ps: также, как ответил @George, также вы должны поставить setMessages на useEffect(() => {}, []), чтобы предотвратить получение данных при каждом обновлении.

...