Post Component 重新渲染甚至调用 Post Component 的其他实例

Question

我是 web 开发的新手，正在尝试学习 react 和 redux。

我正在关注这个教程https://www.youtube.com/playlist?list=PLC3y8-rFHvwheJHvseC3I0HuYI2f46oAK

当我试图扩展我学到的东西时，

我正在尝试列出所有用户（可点击）， 单击后将显示（展开/折叠）所选用户的所有帖子（可再次单击）， 单击帖子后，将显示（展开/折叠）该选定帖子的所有评论

要使用的 API：

• 用户：https://jsonplaceholder.typicode.com/users

• 帖子：https://jsonplaceholder.typicode.com/posts?userId={user.id}

• cmets：https://jsonplaceholder.typicode.com/comments?postId={post.id}

现在，我能够列出所有用户并能够展开/折叠， 并且还能够显示用户的帖子但是，我遇到了以下问题：

如果我点击用户[0]，它将展开并显示用户[0]的帖子（OK）。

然后如果我点击用户[1]，将展开并显示用户[1]的帖子（OK）

然而，在点击用户[1]时，它也会将用户[0]上列出的帖子更改为也列出用户[1]的帖子（不行）

这是我的UserContainer.js

import React, { useEffect } from "react";
import { connect } from "react-redux";

import { fetchUsers, updateUser } from "../redux";
import PostsContainer from "./PostsContainer";

function UsersContainer({ userData, fetchUsers, updateUser }) {
  useEffect(() => {
    fetchUsers();
  }, []);

  const handleClick = event => {
    //console.log(userData.users)
    const indx = userData.users.findIndex(obj => obj.id == event.target.value);
    //console.log(indx)
    userData.users[indx].collapse = !userData.users[indx].collapse;
    //console.log(userData.users[indx].collapse + " " + indx);
    updateUser(userData);
  };

  return userData.loading ? (
    <h2>loading</h2>
  ) : userData.error ? (
    <h2>{userData.error}</h2>
  ) : (
    <div>
      <h2>User List</h2>
      <div className="list-group">
        {userData.users.map(user => (
          <div>
            <button
              type="button"
              className="list-group-item list-group-item-action"
              key={user.id}
              onClick={handleClick}
              value={user.id}
            >
              {user.name}
            </button>
            {/* for update to change SampleContainer component to POST component */}
            {!user.collapse && (
              //<SampleContainer id={user.id} name={user.name} />
              <PostsContainer id={user.id} />
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

const mapStateToProps = state => {
  return {
    userData: state.user
  };
};

const mapDispatchToProps = dispatch => {
  return {
    fetchUsers: () => dispatch(fetchUsers()),
    updateUser: users => dispatch(updateUser(users))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UsersContainer);

我不知道为什么 stackoverflow 发现我的帖子的代码格式不正确，因此我无法放置 PostContainer 组件。

这里是完整参考代码的代码框链接： https://codesandbox.io/s/react-redux-testing-mi6ms

Answer 1

您正在将特定选定用户的帖子存储在一个实例中，因此将postsReducer 的状态posts 更改为对象以存储多个用户的帖子

请找到代码沙箱here

编辑

如果你想阻止其他用户的加载指示器，你需要存储当前正在加载的 id 数组，并在数据加载后删除 id，因为你需要更新你正在处理的方式将减速器的加载状态从布尔值加载到数组

请查找更新后的沙盒here