React useState数组点击按钮仅保存单个ID无法累加存储

存储收藏帖子ID的postid状态被定义在单个Post组件内部。列表中每一个帖子对应一个独立的Post组件实例，每个实例的状态是完全隔离、互不共享的。点击任意帖子的收藏按钮时，只会修改当前帖子对应组件实例内的状态，其他帖子组件的状态始终保持初始空数组状态，切换点击不同帖子时，操作的是不同组件里独立的空数组，自然无法保留之前存储的ID。
另外原代码里的状态更新写法setPostID([...postid, id])在快速连续点击时，可能因为React状态异步更新、闭包捕获旧值的特性出现丢数据的问题，就算状态位置放对了也存在隐患。

• 将收藏ID数组的状态提升到所有Post组件的共同父组件（即渲染帖子列表的页面/容器组件）中统一维护，再把更新收藏状态的方法通过props传递给每一个Post子组件调用，保证所有帖子操作的是同一份状态数据。
• 更新数组状态时使用函数式更新写法，规避闭包旧值问题，同时可以加去重逻辑避免同一个ID被重复存入数组。

父组件示例代码：

import { useState } from 'react'
import Post from './Post'

export default function PostList() {
  // 统一维护全局收藏ID列表
  const [favoriteIds, setFavoriteIds] = useState([])

  const handleFavoriteClick = (postId) => {
    // 函数式更新拿最新状态，同时实现去重/取消收藏逻辑
    setFavoriteIds(prev => {
      if (prev.includes(postId)) {
        return prev.filter(id => id !== postId)
      }
      return [...prev, postId]
    })
  }

  // 帖子列表数据，替换成你实际的接口返回数据即可
  const posts = []

  return (
    <div className="post-list-wrap">
      {posts.map(post => (
        <Post
          key={post.id}
          data={post}
          onFavoriteClick={handleFavoriteClick}
          isFavorited={favoriteIds.includes(post.id)}
        />
      ))}
    </div>
  )
}

修改后的Post子组件代码：

import React from 'react'
import Demopic from "../assets/img/demopic/4.jpg";
import { useState } from 'react';

export default function Post(props) {
  const { id, title, body } = props.data;
  const { onFavoriteClick, isFavorited } = props;
  const [isActive, setActive] = useState(false);

  return (
    <div className="card">
        <div className="row">
            <div className="col-md-5 wrapthumbnail">
                <a href="post.html">
                    <div className="thumbnail dd" style={{ backgroundImage: 'url(' + Demopic + ')' }}>
                    </div>
                </a>
            </div>
            <div className="col-md-7">
                <div className="card-block">
                    <h2 className="card-title"><a href={'/post-detail/'+id} key={id}>{title}</a></h2>
                    
                    <h4 className="card-text">
                    {body.length > 100 ? `${body.substring(0, 90)}...` : body }
                    </h4>
                    <div className="metafooter">
                        <div className="wrapfooter text-left">
                            <span className="meta-footer-thumb">
                            <a href="author.html">
                                <img className="author-thumb" src="https://www.gravatar.com/avatar/e56154546cf4be74e393c62d1ae9f9d4?s=250&amp;d=mm&amp;r=x" alt="Sal"/></a>
                            </span>
                            <span className="author-meta">
                            <span className="post-name"><a href="author.html">Steve</a></span><br/>
                            <span className="post-date">22 July 2017</span><span className="dot"></span><span className="post-read">6 min read</span>
                            </span>
                            <button 
                              onClick={() => onFavoriteClick(id)}
                              value={id}
                            >
                              {isFavorited ? '已收藏' : 'click here'}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  )
}

补充：如果需要持久化存储收藏数据不随页面刷新丢失，可以在父组件里把favoriteIds同步存到localStorage，初始化状态时从localStorage读取初始值即可。

内容的提问来源于stack exchange，提问作者MA-2016