Javascript 为什么我所在的州会被推翻？反应

我正在使用useState钩子来管理状态。每当用户单击likePost时，都会使用newData调用setData。这会导致状态更新，如图像中所示，并且项将丢失postedBy名称item.postedBy.name将变得未定义。这会导致用户标题div为空并折叠

有关守则包括：

const Home = () => {
const [data, setData] = useState([]);
// for access to user who's logged in, use context
const {state, dispatch} = useContext(UserContext);
useEffect(()=>{
    fetch('/allposts', {
        headers:{
            "Authorization":"Bearer " + localStorage.getItem("jwt")
        }
    }).then(res=>res.json())
    .then(result=>{
        console.log(result);
        setData(result.posts);
    });     
}, []);

const likePost = (item, id) => {
    fetch('/like', {
        method: "put", 
        headers: {
            "Content-Type":"application/json",
            "Authorization":"Bearer " + localStorage.getItem("jwt")
        },
        body: JSON.stringify({
            postId:id
        })
    }).then(res=>res.json())
    .then(result=>{
        const newData = data.map(item=>{
            if(item._id == result._id){
                return result;
            }else{
                return item;
            }
        })
        setData(newData);
    }).catch(err=>{
        console.log(err);
    })
};

及

返回(
{
postsReversed.map（项=>{
返回(
{item.postedBy.name}{item.postedBy.\u id==state.\u id
&&deletePost（项目编号）}
>删除
}
{item.likes.includes（state.\u id）
?
{unlikePost（项目编号）}
>拇指朝下
: 
{likePost（item.\u id）}
>竖起大拇指
}

这似乎按预期工作，您正在使用从

/like

端点得到的响应来替换

/data

数组中的项目。您可以更改服务器以返回与

/allposts

相同的项目数据结构，也可以使用以下方法：

....
if (item._id == result._id) {
    return { ...item, likes: result.likes };
}
....

仅更新项目的一部分

....
if (item._id == result._id) {
    return { ...item, likes: result.likes };
}
....