即使调用了Post Component的其他实例，Post Component也会重新渲染

Question

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

我正在学习本教程https://www.youtube.com/playlist?list=PLC3y8-rFHvheJHvseC3I0HuYI2f46oAK

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

我正在尝试列出所有用户(可点击(，一旦点击将显示(展开/折叠(所选用户的所有帖子(可再次点击(，点击帖子后，将显示(展开/折叠(所选帖子上的所有评论

要使用的API：

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

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

• 评论：https://jsonplaceholder.typicode.com/comments?postId=｛post.id｝

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

如果我点击用户[0]，它将展开并显示用户[0]的帖子(确定(。

如果我点击用户[1]，将展开并显示用户[1]的帖子(确定(

但是，当点击用户[1]时，它也会更改用户[0]上列出的帖子，以列出用户[1]的帖子(NOT OK(

这是我的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更改为object以存储多个用户的帖子

请在这里找到代码沙盒

编辑

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

请在这里找到更新的沙盒