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（）触发获取过程... 每当您在课程中执行诸如（创建，更新，删除等）操作时，在每种功能之后触发获取课程操作。它将自动更新redux-store，并且组件（课程）将自动更新。

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();  

}

反应-componentWillReceiveProps条件不会呈现组件中的数据

1 个答案: