为什么.map function 没有反应

Question

我有一个简单的反应演示，其中显示 websocket 消息，但.map function 内部返回语句不返回任何内容。 没有错误，也没有消息。 谁能解释问题出在哪里？

const [messages, setMessages] = React.useState([])

//push the websocket messages response to const messages
const addMessage = (message) => {
    let n = messages;
    let d = message;
    n.push(d);
    setMessages(n)

    //the following both works as expected
    messages.map((item) => {
        console.log('message', item.message)
    })
    messages.map((message, index) =>
        console.log(message,index)
    )
}

现在返回语句中的问题：这里没有返回任何内容。

 return (
   <div>
     {
       messages.map(function(message, index){
         return (<p id={'t'+index}>{message.message}</p>)
       }),

       messages.map((message, index) =>{
         return (<p id={'z'+index}>{message.message}</p>)
       })
     }
  </div>
)

可能收到 websocket 消息后，return 语句没有重新渲染？ 我希望任何人都有一个想法并可以解释这个问题。

Answer 1

问题

您正在改变messages state 数组，方法是直接推入它并将其保存回 state。 messages数组引用永远不会改变。 React 使用浅 object 引用相等来帮助确定何时应该更新 DOM。 如果引用永远不会更新，那么 React 将放弃重新渲染。

const [messages, setMessages] = React.useState([])

//push the websocket messages response to const messages
const addMessage = (message) => {
  let n = messages; // <-- reference to state
  let d = message;
  n.push(d);        // <-- state mutation
  setMessages(n).   // <-- saved back into state

  ...
}

解决方案

始终浅拷贝 state 正在更新。 使用功能 state 更新从以前的 state 更新

const [messages, setMessages] = React.useState([])

//push the websocket messages response to const messages
const addMessage = (message) => {
  setMessages(messages => [
    ...messages, // <-- shallow copy messages array
    message,     // <-- and append new message
  ])

  ...
}

Answer 2

我认为你应该尝试：

let n = [...messages];

反而

let n = messages;