Reactjs 为什么返回数据不显示？

我用

控制台进行了检查。log

显示了数据，但主页上没有显示数据，我不明白这里出了什么问题，请帮助我，提前谢谢

useEffect(() => {
  const newArr = [...messages, ...receiveMessages]
  console.log("newArr", newArr)
    newArr.map(m => 
     console.log(m.type,m.msg)
     )
}, [messages, receiveMessages]);

 
 { newArr ? newArr.map((m) => {
      return <div style={{float :'right'}}>{m.msg}</div>
  })
  : null 
  } 

useffect（（）=>{
const newArr=[…消息，…接收消息]
console.log（“newArr”，newArr）
newArr.map（m=>
console.log（m.type，m.msg）
)
}，[messages，receiveMessages]）；
{newArr？newArr.map（（m）=>{
返回{m.msg}
})
：null
} 

您需要使用newArr作为状态变量

const [newArr, setNewArr] = React.useState(null)
useEffect(() => {
  setNewArr([...messages, ...receiveMessages])
}, [messages, receiveMessages, setNewArr]);

---

您使用

const

关键字在useffect内部声明了

newArr

变量，该关键字的作用域位于一对括号内，因此它在

useffect

外部未定义，这就是渲染代码返回

null

的原因

您可以将

const newArr=[…messages，…receivedMessages]

移出

useffect

功能，它可以工作，但不建议这样做，使用linting工具（eslint等）时会出现警告或linting错误

最好的方法是将

newArr

存储为状态

const [newArr, setNewArr] = React.useState([]);

useEffect(() => {
  setNewArr([...messages, ...receiveMessages])
}, [messages, receiveMessages]);

---

但是

newArr

数据在

控制台中显示为空。log

但是

newArr

数据在

控制台中显示为空。log

setNewArr

异步运行，因此如果您在

setNewArr

之后立即执行

console.log

，该值仍然是默认值

[]

，尚未更新。要获取更新后的值，您应该使用另一个像这样的useffect:

useffect（（）=>console.log（newArr），[newArr]）

；如果我们在实际项目中非常常见的功能组件中使用多个

useffect

，可以吗。当然可以