为什么我的本地状态被覆盖了？反应

Question

我正在使用 useState 挂钩来管理状态。每当用户单击 likePost 时，都会使用 newData 调用 setData。这会导致状态更新，如图像中所示，并且项目丢失 postedBy name item.postedBy.name 变得未定义。这会导致 user-title div 变空并崩溃。

before likePost

after likePost

相关代码包括：

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);
    })
};

和

return (
    <div className="home">
        {
            postsReversed.map(item=>{   
                return(
                    <div className="card home-card" key={item._id}>
                        <h5 className="user-title"><Link to={item.postedBy._id !== state._id ? "/profile/"+item.postedBy._id : "/profile/"}>{item.postedBy.name}</Link>{item.postedBy._id == state._id
                            && <i className="material-icons" style={{
                                float: "right"
                        }}
                        onClick={()=>deletePost(item._id)}
                        >delete</i>
                        }</h5>
                        <div className="card-image">
                            <img src={item.photo} />
                        </div>
                        <div className="card-content">
                            <div>
                            {item.likes.includes(state._id)
                                ?
                            <i className="material-icons"
                                onClick={()=>{unlikePost(item._id)}}
                            >thumb_down</i>
                                : 
                            <i className="material-icons"
                                onClick={()=>{likePost(item._id)}}
                            >thumb_up</i>
                            }

Answer 1

这似乎按预期工作，您将 data 数组中的一项替换为您从 /like 端点收到的响应中的一项。您可以将您的服务器更改为 return 与 /allposts 相同的项目数据结构，或者使用类似：

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

只更新项目的一部分。

为什么我的本地状态被覆盖了？反应

Why is my local state being overridden? React

javascript

state

reactjs