我有一个简单的反应演示，用于显示 websocket 消息，但 return 语句中的 .map 函数不返回任何内容。没有错误，也没有消息。谁能解释一下问题出在哪里？
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 语句？我希望任何人都有想法并可以解释这个问题。
您messages通过直接推入状态数组并将其保存回状态来改变状态数组。该messages数组引用永远不会改变！React 使用浅对象引用相等来帮助确定何时应该更新 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
...
}
始终是正在更新的浅拷贝状态。使用功能状态更新从之前的状态更新
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
])
...
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句