Question

运行我的代码时，它会不断循环遍历ComponentDidUpdate()。所以我的问题是我应该使用哪种生命周期方法？因为它正在遍历，因为我的组件在Render中反复调用它，对吗？还是一个错误的假设？我尝试过ComponentWillMount()，但是每次都会渲染一个空数组。

组件

 const NetflixTile = ({ videos }) => {
      console.log("In tile " + JSON.stringify(videos));
      if (videos.length != 0) {
        for (let i = 0; videos.length > i; i++) {
          console.log();

          return (
            <div className="row__inner">
              <div className="tile">
                <div className="tile__media">
                  <img
                    className="tile__img"
                    id="thumbnail"
                    src="this.state.penis"
                    alt=""
                  />
                </div>
              </div>
            </div>
          );
        }
      } else {
        return (
          <div>
            <h1>
              You have not yet uploaded any STEM content. Go to your dashboard page
              and click Upload to add to this library.
            </h1>
          </div>
        );
      }
    };

    export default NetflixTile;

渲染类

构造函数

constructor(props) {
    super(props);
    this.props.getVideos();
    this.state = {
      thumbnail: []
    };
  }

渲染代码段

  return (
      <div className="explore">
        <div className="row">
          <NetflixTile videos={this.state.thumbnail} />
        </div>
      </div>
    );

ComponentDidUpdate

 componentDidUpdate(prevState) {
    console.log("Current State->" + this.state.thumbnail);
    console.log("Previous State->" + prevState.thumbnail);

    if (this.props.videos == null) {
      console.log("It's null");
    } else {
      if (this.state !== prevState) {
        const videos = this.props.videos.video.map(video => {
          this.setState(prevState => ({
            thumbnail: [...prevState.thumbnail, video.thumbnail]
          }));
          console.log(this.state.thumbnail);
        });
      }
    }
  }

修改我按照建议更改了componentDidUpdate，但无法弄清楚为什么this.state.thumbnail甚至没有返回数组。 prevState.thumbnail尚未定义。如果我只是prevState，它确实会返回对象。

Answer 1

反应文档说：

componentDidUpdate（）在更新发生后立即被调用。   初始渲染未调用此方法。

以此为契机在组件上操作DOM   已经更新。这也是进行网络请求的好地方，因为   只要您将当前道具与以前的道具进行比较（例如   如果道具没有更改，则可能不需要网络请求。

这对您很重要：

您可以在componentDidUpdate（）中立即调用setState（），但请注意必须将其包装在上面示例中所示的条件下，或者您将导致无限循环。

您不得在没有条件的情况下使用setstate，在componentDidUpdate中设置状态将导致无限循环。

我会说完全避免它们。

使用哪种方法？

如果您使用的是早期版本，则使用16.3使用componentWillReceiveProps 如果您使用的是16.3或更高版本，请使用getDerivedStateFromProps

Here is an interesting conversation to read

根据评论更新：

应用条件时需要具体说明，仅此状态state。== prevState`。

假设您有this.state.counter = 1，并且您正在将{.1。}更新为{.1。}，而this.state.counter的值为2。

这将始终导致无限循环。

组件中的无限循环将更新

渲染类

1 个答案: