如何更新数组列表中单个项目的状态而不更新 ReactJs 中数组中的每个列表答案

【问题标题】：How to update the state of single items in a list of array without updating every list in the array in ReactJs如何更新数组列表中单个项目的状态而不更新 ReactJs 中数组中的每个列表
【发布时间】：2020-06-21 23:07:47
【问题描述】：

所以我正在开发一个 React 项目，该项目具有与 instagram 相关的功能，以便获取数据（您可以将其称为提要）。

const feeds = [{
  postId: 1,
  body: "My first post,
  commentList: [{
    commentId: 1,
    comment: "I love this post"
  }],
  isFollowing: true,
  likers: [1]
}, ]

所以每个项目的视觉必须有一个喜欢/不喜欢按钮，关注/取消关注按钮和评论表单的创建。我只想更新该项目，而不是当我单击一个项目上的“赞”按钮时，它会更新列表中的其他项目。

从我目前所做的来看，当您单击赞按钮时，它会调度一个动作并将状态更新为 isLike: true ，这将用于更改赞按钮的颜色，但它会影响列表中的每个项目

处理like和like按钮的函数

   const handleLikeClick = () => {
     const data = {
       postId,
     };
     props.unlikePost(data, token);
   };
   const handleUnlikeClick = () => {
     const data = {
       postId,
     };
     props.likePost(data, token);
   };

视图取决于状态取决于调度的动作

 {isLike ? (
           <i onClick={handleLikeClick}>
             <img src={IconLike} alt="" />
           </i>
         ) : (

)}

处理对 api 的请求的函数

   export const likePost = (data) => async (
      dispatch
    ) => {
      dispatch(likePostSuccess())
      await axios
        .post(url, data)
        .then((response) => {
          dispatch(likePostSuccess())
        })
        .catch(({ err }) => {
            dispatch(likePostFailure());
        }); 
    }; 
   export const unlikePost = (data) => async (
      dispatch
    ) => {
      dispatch(unlikePostSuccess())
      await axios
        .delete(url,{
          data: {
            postId: data 
          }
        })
        .then((response) => {
          dispatch(unlikePostSuccess())
        })
        .catch(({ err }) => {
            dispatch(unlikePostFailure());
        }); 
    };

reducer 文件

const initialState = {
  isLike: false,
}

case Actions.LIKE_POST_SUCCESSFUL:
      return {
        ...state,
        loading: false,
        isLike: true,
      };
      case Actions.LIKE_POST_FAILURE:
      return {
        ...state,
        loading: false,
        isLike: false
      };
      case Actions.UNLIKE_POST_SUCCESSFUL:
      return {
        ...state,
        loading: false,
        isLike: false,
      };
      case Actions.UNLIKE_POST_FAILURE:
      return {
        ...state,
        loading: false,
        isLike: true
      };

所以这就是我到目前为止所拥有的，一旦动作被调度并且 isLike 被更新，它应该改变列表中每个项目的“like”按钮的颜色，而不是列表中的所有内容。提前致谢。

【问题讨论】：

我不确定我是否理解这个问题。如果您想更新一个值，只需查看相关数组并更新特定对象。
@MrBrN197 是的，我可以查看数组，但在这里我使用 react Redux 来更改按钮的状态，所以当动作被调度时，如果成功，它会更新 isLike:true。所以 isLike 将在组件中用于更改按钮，但是当我单击该按钮进行喜欢时，它也会影响列表中的其他项目
类似问题：stackoverflow.com/questions/58015502/…

标签： javascript arrays reactjs redux react-redux

【解决方案1】：

问题是你有一个 redux 属性 isLike 而不是从后端检索帖子的状态。显然，单个布尔属性不能代表所有不同帖子的状态。如果用户刷新页面会发生什么？您需要做的是将属性 isLiked 添加到数据本身，并在 redux 中有一组帖子，当有人喜欢（或不喜欢）帖子时会更新。

但是请记住，“喜欢”是在用户和帖子之间，它不是帖子本身的属性。因此，后端需要以这样一种方式设置，即它返回的数据考虑到谁将数据返回给谁。因此 GET 请求需要包含用户 ID，而后端需要从多个表中提取数据以创建 JSON 响应。

如果你不考虑后端，至少你需要在帖子数据中添加isLiked字段，将该数组保留在redux中，并在用户点赞时更新数组中的特定项目。

【讨论】：

谢谢，它成功了。我必须从后端包含 isLiked 并根据点击更新状态。谢谢

【解决方案2】：

有一种这种模式，您可以将所有 id 存储在一个数组中，将数据存储在一个对象中。

reduxStore: {
 allIds: ['a', 'b', 'c', 'd'], // keys
 byId: {
   a: {isLike: true, loading: false }, 
   b: {isLike: true, loading: false}, 
   c: {isLike: false, loading: true}
}

现在父组件将订阅 allIds（仅包括键）并呈现子数组。每个孩子都会从组件本身订阅自己的数据。因此，在需要时更新 byId 对象中的项目只会影响它自己。

参考：https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape#organizing-normalized-data-in-state

【讨论】：