Javascript 组件中的无限循环将更新_Javascript_Reactjs_Infinite Loop

Javascript 组件中的无限循环将更新

javascript reactjs

Javascript 组件中的无限循环将更新,javascript,reactjs,infinite-loop,Javascript,Reactjs,Infinite Loop,当我的代码运行时，它会不断循环通过componentdiddupdate（）。所以我的问题是，我应该使用什么生命周期方法呢？因为它是循环的，因为我的组件在Render中反复调用它，对吗？或者这是一个错误的假设？我尝试了ComponentWillMount（），但每次都会呈现一个空数组组件 const NetflixTile = ({ videos }) => { console.log("In tile " + JSON.stringify(videos));

当我的代码运行时，它会不断循环通过

componentdiddupdate（）

。所以我的问题是，我应该使用什么生命周期方法呢？因为它是循环的，因为我的组件在

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;

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

呈现片段

 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;

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

编辑我按照建议更改了componentDidUpdate，但无法理解为什么

this.state.thumbnail

返回时甚至没有数组<代码>prevState。缩略图只是未定义。如果我只执行

prevState

操作，它会返回对象

react文档说明：

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

当组件运行时，可以利用此机会对DOM进行操作已更新。这也是处理网络请求的好地方只要将当前道具与以前的道具进行比较（例如a 如果道具未更改，则可能不需要网络请求）

这对您很重要：

您可以在componentDidUpdate（）中立即调用setState（），但请注意必须将其包装在与上述示例类似的条件中，或者你将导致一个无限循环

不能无条件地使用setstate，在componentDidUpdate中设置状态将导致无限循环

我要说的是完全避免它们

使用哪种方法？

如果您使用的是以前的版本，那么16.3 use

componentWillReceiveProps

如果您使用的是16.3或更高版本，请使用

getDerivedStateFromProps

根据评论更新：

应用条件时，您需要具体说明，this.state！==光有“国家”是不够的

假设您有this.state.counter=1，并且您正在将组件更新为

componentdiddupdate

，并将this.state.counter增加为2

这将始终导致无限循环。