Question

我一直在研究一个小型的todo应用程序来学习并了解一些反应。一切都按照计划进行，直到我开始完成应用程序的完整部分。我试图解决的问题可能很简单，但是，我似乎无法理解正在发生的事情。我想要做的是调用我的 createCompletedList 方法，这样我就可以创建所有已完成的项目。虽然，当在 componentDidUpdate 方法中调用该方法时，它会创建一个崩溃浏览器的无限循环。有什么方法可以调用 createCompletedList 方法，这种方法是否安全？

非常感谢任何形式的建议或信息。

import React, { Component } from "react";

class Completed extends Component {
  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      completedItems: []
    };

    this.checkIndex = this.checkIndex.bind(this);
    this.createCompletedList = this.createCompletedList.bind(this);
  }

  checkIndex(event) {
    console.log("index value is " + this.props.indexValue);
  }

  createCompletedList() {
    const completedIndex = this.props.indexValue;
    const completedArray = this.state.completedItems;

    if (completedIndex) {
      completedArray.push(this.props.arrayItems[completedIndex]);
      this.setState(prevState => {
        return { completedItems: completedArray };
      });
    }

    console.log(this.state.completedItems);
  }

  componentDidUpdate() {
    this.createCompletedList();
  }

  render() {
    let completedArray = this.state.completedItems;

    const retrieveList = completedArray.map((elm, index, arr) => {
      return (
        <div className="check-list-row checked" key={index}>
          {elm}
        </div>
      );
    });
    return (
      <div
        className={this.props.isTaskChecked ? "completed-container" : "hide"}>
        <div className="completed-row">
          <h1>Completed</h1>
        </div>
        <div>
          {retrieveList}
        </div>
      </div>
    );
  }
}
export default Completed;

Answer 1

不要在componentDidUpdate方法中更新状态。

如果你不想在这种方法中更新你的状态，你必须先将当前状态与你的状态进行比较。

componentDidUpdate(prevProps, prevState) {
 if(JSON.stringify(prevState) !== JSON.stringify(this.state)) {
   ///your code....
 }


}

或者比较其他功能或库，如lodash。

Answer 2

调用1将始终导致更新。您可以使用this.setState()来确定是否实际更新。默认情况下，此方法始终返回shouldComponentUpdate(nextProps, nextState)。将true与nextState.completedItems进行比较，如果您不想更新，请返回this.state.completedItems。

componentDidUpdate导致无限循环

2 个答案: