为什么不渲染更新状态？

Question

我的应用程序中有一个社区功能，用户可以在其中 post 他们 comments.I 想要在单击特定图标时切换评论的可见状态。图标：

 <i className="fa-solid fa-message" onClick={(e)=>handleComment(e)}></i>
        {!props.post.isCommentVisible && <> <Container maxW="md" centerContent p={8}>
          {props.post.comment.map((comm) => (
            <Text>{comm}</Text>
          ))}

切换ccomment可见性的函数是：

function handleComment(e)
  {
    const id=props.post.id;
    posts.map((post)=>{
      if(post.id==id)
      {
       if(post.isCommentVisible=="false")
       {
         post.isCommentVisible="true";
       }
       else
       {
        post.isCommentVisible="false";
       }
         
         
       db.collection("posts").doc(id).set(post);
      }
    })

  }

有趣的是，评论的可见状态已更新，但 React 不会重新呈现更改后的状态。

Answer 1

无论 props.post.isCommentVisible 是 "true" 还是 "false"，表达式 !props.post.isCommentVisible 将始终是 false，因为 "anyString" 始终为真。

Answer 2

假设你在某处定义：

const [posts, setPosts] = useState([]);

然后通过一些获取操作更新填充的posts，你必须像这样调用setPosts：

setPosts(
    posts.map((x) => ({
        ...x,
        isCommentVisible:
            x.id === post.id ? !x.isCommentVisible : x.isCommentVisible,
    }))
);

（使用任何你想要的方法来获得结果，注意 Rocky Sims 的评论）

这将导致 re-render。

为什么不渲染更新状态？

Why react not rendering updated state?

javascript

reactjs

state

use-effect

use-state