关于react hook中数组state的更新

categories: [前端,项目问题]
thumbnail: /images/fe/hanshu.jpeg

关于react hook中数组state的更新

react hook只用了useState钩子函数来给函数（无状态）组件添加状态，今天在写一个小应用的时候就遇到了问题，我设置了一个状态为messagearr数组用来存储当前收到的消息，默认为空。当接收到新消息，则使用setMessagearr进行更新，但却遇到了问题
我们已经知道react hook更新数组不是往原数组里添加项目，而是要用一个新数组完全替代，所以不能直接这样写

messagearr.push(newitem)
setMessagearr(messagearr)

但是我用下面这个写法出现了问题

import React, { useEffect, useState } from 'react'
function Index(){
    const [messagearr, setMessagearr] = useState([])
    //接收到新消息时调用这个函数
    function changeMessageArr(e){
		 setMessagearr([...messagearr,{from:data.from, to:data.to, message:data.message}])
         console.log(messagearr)
	}
    return (
		
	)
}
export default Index

可以看到，每次接收到新消息，调用函数，明明已经向messagearr中添加新项目，但是打印出来全都是空数组
折腾了一番，用下面的写法勉强解决，但是最终原因还要进一步学习研究

function changeMessageArr(e){
        // setMessagearr([...messagearr,{from:e.from, to:e.to, message:e.message}])
        setMessagearr(messagearr => {return [...messagearr,{from:e.from, to:e.to, 	message:e.message}]})
        console.log(messagearr)
   }