状态更改但子组件未重新渲染

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}

我在用户数组上添加了一个属性collapse，用于展开/折叠监控

我的问题是：

1. 在我的 UsersContainer 组件上单击用户后，折叠属性会发生变化（参见控制台），但 SampleContainer 组件没有隐藏/显示
2. 在教程中，他说要更改状态，我们应该/必须使用 action/reducer（忘记了时间戳）。 由于这是数组上的附加属性，如果我更新 handleClick 函数的状态可以吗？如果不是，请告诉我如何实现这种动作/减速器。

下面是我的UserContainer.js

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

import { fetchUsers } from "../redux";

function UsersContainer({ userData, fetchUsers }) {
  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);
  };

  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} />}
          </div>
        ))}
      </div>
    </div>
  );
}

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

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

const SampleContainer = props => {
  return (
    <div>
      {/* trying to pass the id/name in prep for POST component*/}
      display Posts of - {props.name} ({props.id}){" "}
    </div>
  );
};

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

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

Answer 1

您正在直接更新不可变的 userData 道具，即它们无法更改且不会更新 UI。您需要通过调度一个新操作来更新您的 redux 存储，在这种情况下，它将是 UPDATE_USER_STATUS。

这是一个 codesandbox 的工作示例。