React - условие componentWillReceiveProps не отображает данные в компоненте

Question

У меня есть компонент с componentWillReceiveProps методом живого цикла. внутри компонента я могу создать действие.

Насколько я понимаю, componentWillReceiveProps визуализирует компонент каждую секунду. по этой причине я добавил условие для активации компонента рендеринга, только когда this.props не равно prevProps.

по какой-то причине каждый раз, когда реквизиты обновляются, this.props.fetchCourses(); внутри componentWillReceiveProps не отображается. а также я не вижу результат console.log. Что указывает на то, что блок не p

Я использую библиотеку fast-deep-equal для сравнения объектов, но я открыт для предложений.

У меня вопрос, почему компонент не рендерится при обновлении реквизита.

import React, { Component } from "react";
import { connect } from "react-redux";
import equal from "fast-deep-equal";

import { fetchCourses, deleteCourse } from "../../actions";

class Courses extends Component {
  componentDidMount() {
    this.props.fetchCourses();
  }


  componentWillReceiveProps(prevProps) {
    console.log(this.props.courses);
    console.log(prevProps.courses);

    if (!equal(this.props.courses, prevProps.courses)) {
      this.props.fetchCourses();
    }
  }

  render() {
    const prevProps = prevProps => {
      console.log("this.props", this.props.courses.length);
      console.log("prevProps ", prevProps.courses.length);
    };

    const courses = this.props.courses.map(course => {
      return (
        <tr key={course && course.id}>
          <td>
            {course.coursename}- {course && course.id}
          </td>

          <td>{course.coursetype ? "yes" : "no"}</td>

          <td>{course.courseweeklyhours}</td>

          <td>
            <button
              onClick={() => this.props.deleteCourse(course && course.id)}
            >
              הסר
            </button>
          </td>
        </tr>
      );
    });

    return <tbody>{courses}</tbody>;
  }
}

const mapStateToProps = state => {
  console.log("state ", state);

  return {
    courses: state.courses
  };
};

export default connect(
  mapStateToProps,
  { fetchCourses, deleteCourse }
)(Courses);

Answer 1

Мое предложение: вы действительно не хотите, чтобы componentWillReciveProps () запускал курс выборки ... всякий раз, когда вы выполняете операции, такие как (создание, обновление, удаление и т. д.) в курсах, инициировать действие извлечения курса после каждой функциональности. оно автоматически обновляет хранилище приращений, а компонент (курсы) обновляется автоматически.

handleCreateCourse = async (values)=>{

  //logics for create courses and api call
   await createCourse(values);

   //trigger your fetchCourses action here 
   //it will update your other components where you listened courses from redux.
   this.props.fetchCourses();  

}