反应原生 - 当更改状态中的属性时，所有其他属性都为空

Question

嗨，这是我的第一个问题，所以请放轻松。我是本机反应的新手，我无法使以下代码正常工作：

const [posts, setPost] = useState(props.post);
const [isLiked, setIsLiked] = useState(false);
const onLikePress = async () => {
    setPost({likes: posts.items.likes + 1})
};

上述代码的最终目标是增加帖子的点赞数，道具从主页传递并且一切正常，但是然后点击点赞按钮似乎帖子状态为空并且所有字段变为空。

下面是来自世博会的屏幕截图，在按下类似图标之前，道具中的所有内容都显示正常。

感谢任何帮助理解为什么会发生这种情况

编辑：

感谢您的帮助，它现在可以正常工作，但我仍然有点困惑，当我将状态设置为以下所有尝试错误时。

const [posts, setPost] = useState(props.post);

但是如果我把这条线改成

const [posts, setPost] = useState(props.post.item);

我可以更新喜欢的内容

setPost({...posts, likes:posts.likes+1})

谁能帮我理解为什么 props.posts 与 item 和 item 中包含的数据一起传递，这是使用平面列表的怪癖

Answer 1

您已覆盖状态。在这种情况下，您可以尝试以下代码：

setPosts({...posts,"likes": posts.items.likes + 1});

更多信息可以参考https://codesandbox.io/s/naughty-meadow-9dkj3?file=/src/App.js

Answer 2

就像 Jason 在 cmets 中提到的那样，您正在完全覆盖状态变量。 请尝试使用以下语法：

var person={name:"my name","age":21}
setPerson({...person,"birth":1999});

上面的预期结果是：person={name:"my name","age":21,"birth":1999}