React componentWillUpdate每秒运行一次并且条件不起作用

Question

在这个生命周期方法中，我有一个带有componentWillUpdate的React组件，我称之为动作，该动作中带有console.log。

我有两个问题：

1. componentWillUpdate为什么每秒运行一次？

2. 为什么componentWillUpdate中的if不起作用？ 它不应该仅在道具不同时运行吗？

这是组件代码：

** 已更新 **

     import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchCourses } from "../../actions";

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

  componentWillUpdate(prevProps) {

    if (this.props.courses !== prevProps.courses) {
      console.log('prevProps.courses ', prevProps.courses);
      console.log('this.props.courses ', this.props.courses);
      this.props.fetchCourses();
    }
  }

  render() {
    console.log('this.props.payload.courses ', this.props.courses);
    const courses = this.props.courses.map(course => {
      return (
        <tr>
          <td>{course.coursename}</td>

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

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

          <td>
            <button>הסר</button>
          </td>
        </tr>
      );
    });

    return (
      <div>
        Courses
        {courses}
      </div>
    );
  }
}

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

  return {
    courses: state.courses
  };
};

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

Courses返回一个数组

Answer 1

const arr1 = [1,2,3,4]
const arr2 = [1,2,3,4]

arr1 == arr2 // answer is false

因此arr1 !== arr2的含义为true。因此，代码块将运行。在其中，您称为动作创建者。现在，商店将被更新。现在，它将再次检查componentWillUpdate（）中的条件。是的再次arr1 !== arr2表示正确。因此它将再次运行。再次，它将调用动作创建者。同一件事发生在无限的时间。问题出在您的情况上。

1）每次更新商店时，componentWillUpdate（）都会执行。在里面，你永远处于真实状态。这样，您可以在“ if结构”内部再次调用动作创建者。因此它将再次更新商店。因此componentWillUpdate（）再次执行。现在由于永远的真实条件，“如果结构”将再次运行。将一次又一次地运行，直到您杀死服务器为止。