Изменения состояния, но дочерний компонент не рендерится повторно

Question

У меня новичок в веб-разработке, и я пытаюсь научиться реагировать и сокращаться.

Я следую этому уроку https://www.youtube.com/playlist?list=PLC3y8-rFHvwheJHvseC3I0HuYI2f46oAK

Как я пытаюсь расширить то, что я узнал, я пытаюсь перечислить всех пользователей (кликабельно), после нажатия отобразятся (развернуть / свернуть) все сообщения пользователя (кликабельно снова), после нажатия на пост, отобразится (развернуть / свернуть) все комментарии к этому посту

API для использования:

пользователи: https://jsonplaceholder.typicode.com/users

сообщений: https://jsonplaceholder.typicode.com/posts?userId= {user.id}

комментарии: https://jsonplaceholder.typicode.com/comments?postId= {post.id}

Я добавил свойство collapse в массиве пользователей при получении для расширения / Свернуть мониторинг

Мои проблемы:

1. В моем компоненте UsersContainer при нажатии на пользователя, свойство свертывания изменяется (см. на консоли), однако компонент SampleContainer не скрывается / show
2. В учебнике он сказал, что для изменения состояния мы должны / должны использовать действие / редуктор (забыл метку времени). Так как это дополнительное свойство в массиве, это нормально, если я обновлю состояние функции 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, которые являются неизменяемыми, т. Е. Они не могут измениться и не обновляют пользовательский интерфейс. Вам нужно будет обновить свое хранилище резервов, отправив новое действие, в этом случае это будет UPDATE_USER_STATUS.

Вот codesandbox с рабочим примером.