来自 api 的 ComponentDidUpdate() 数据和新数据

Question

作为新手，我看到了一个类似的例子，但没有清楚地解释它们，我不明白如何解决这个问题。我有一个 API，新数据发布到 API。 ComponentDidMount() 将首次从 API 发起数据。 我浏览了文档，发现如果添加了新数据，componentDiUpdate() 将始终重新呈现页面。

这是我目前的代码：

constructor(props){
  super(props);
  this.state = {
    newData: [],
    dataApi: this.props.getAllData() //method that is using GET_ALL_DATA actions/reducers using fetch(get)
  }
}
// it gets the data
componentDidMount() {
  this.state.dataApi
}

componentDidUpdate(prevProps, prevState){
  this.state.dataApi.then(data => {
    if(prevProps.data != this.props.data) {
      this.setState({newData: data});
    }
  }
}

ComponentDidUpdate() 错误：

无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请在 componentWillUnmount 方法中取消所有订阅和异步任务。

我该如何解决这个问题？通过在有人发出发布请求时从 API 获取新数据？谢谢

Answer 1

问题已解决，谢谢大家： 问题的解决方案是：

this.state = {
   allData: [],
   isSubmitted: false
}

async componentDidUpdate(prevProps, prevState){
  if(this.mounted && this.state.isSubmitted){
     const allData = await this.props.getAllData();
     this.setState({isSubmitted: false,
                  allData: allData.data })
  }

componentDidMount(){ 
   this.mounted=true
}

componentWillUnmount() {
   this.mounted = false; 
}

functionAddDataToApi(){
   // some logic
   this.setState({isSubmitted: true})
}

Answer 2

componentDidMount() 生命周期方法仅在您的组件第一次渲染时被调用一次。

在您的constructor() 中，您无需对您的状态做出承诺。相反，您可以删除 dataApi 并直接调用该方法。在componentDidMount() 中，您将进行 API 调用。当 API 调用完成后，您可以使用this.setState()。

componentDidUpdate 方法会在每次更新您的 prop 或 state 值时调用。因此，更新其中的状态是个坏主意，因为您有无限循环的风险。

constructor(props){
      super(props);
      this.state = {
           newData: [], 
      };
}

// it gets the data
componentDidMount() {
    this.props.getAllData().then(data => {
        this.setState({
            newData: data,
         });
    });
}

Answer 3

如果您想在重新渲染之前挂钩道具更改，请尝试挂钩到 componentWillReceiveProps。 componentWillReceiveProps 会同步更新状态。

还有 .. 你的 componentDidMount 中的代码什么也不做 :)

// it gets the data
componentDidMount(){
      this.state.dataApi}

尝试将其替换为

// it gets the data
componentDidMount() {
    this.state.dataApi.then(data => {
        this.setState({
            newData: data,
         });
    });
}

Answer 4

当异步设置状态时（例如，在一个 promise 被解决之后），重要的是确保你的组件仍然被挂载，否则，你可能会在一个未挂载的组件上设置状态（这会触发您遇到的错误）。

为此，您需要设置某种标志（如以下示例中的this.mounted）：

componentDidMount() {
  this.mounted = true;
}

async componentDidUpdate() {
  const data = await someAPICall();
  if (this.mounted && !_.isEqual(this.state.data, data)) { // See comment below
    this.setState({data});
  }
}

componentWillUnmount() {
  this.mounted = false;
}

另外，在将旧数据与新数据进行比较时，您需要执行深度比较（在上面的示例中，我使用的是 lodash isEqual(...)）。

浅比较（即this.state.data !== data）比较每个对象的引用，无论实际数据如何，这些引用总是不同的，因此会遇到无限循环因为setState()会触发另一个componentDidUpdate()等等。