為什么.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;