在React的map遍历函数中如何设置state？现有setPostId写法不生效怎么办？

问题根因 #

你写的{() => setPostId(post.id)}放置在JSX的子节点位置，React渲染时只会将其识别为普通函数对象，不会主动执行该函数，因此状态更新逻辑从未触发。
你的需求是点击对应列表项时将当前post的id存入state，这段逻辑需要绑定到Content组件的onClick事件中，和原有的打开弹窗逻辑合并即可。

修正后代码 #

const [postId, setPostId] = useState();

return (
  <Container>
    {list?.map((post, idx) => (
      // 优化建议：如果列表存在增删/排序场景，key建议用唯一值post.id代替index
      <Content 
        key={post.id} 
        onClick={() => {
          setPostId(post.id);
          openModal();
        }}
      >
        {post.id}
        {post.title}
      </Content>
    ))}

    <Modal data={postId} state={modalState} closeModal={closeModal} />
    <div ref={observer} />
    <div>{isLoading ? <Loading /> : "Data END"} </div>
  </Container>
);
}

export default Posts

逻辑说明 #

点击列表项时，会先执行setPostId将当前点击项的id更新到state，再调用openModal打开弹窗，此时Modal组件接收到的data属性就是对应点击项的id。

内容的提问来源于stack exchange，提问作者JB P