从 REST API 获取数据时，Render 被调用两次

IT技术 reactjs
2021-04-07 06:39:47

我正在尝试使用 React 与 REST API 进行交互，并且我意识到当我获取数据时，render会在没有数据的情况下调用一次，然后再使用数据调用一次。

当我尝试处理此数据时，这会引发异常，但我可以使用 if 语句来检查数据是否为空。但是，我不确定是否需要这样做。

class App extends Component {
  state = {
    TodoList: {},
  };

  componentWillMount() {
    axios.get("http://localhost:5001/1").then((response) => {
      this.setState({
        TodoList: response.data,
      });
    });
  }

  render() {
    console.log(this.state);
    return <h1>hello </h1>;
  }
}

这是我在控制台中看到的： 在此处输入图片说明

3个回答

这是完全正常的。

您的App组件流程如下：

  1. 执行render方法加载组件
  2. 执行代码 componentDidMount
  3. 调用axios.get哪个是异步操作
  4. 接收第 2 步的数据，通过使用更新组件状态 this.setState
  5. App组件检测到状态更新，因此执行render方法再次加载组件

因此，您绝对应该处理this.state.TodoList在第一次加载时发生的没有数据的情况

更新：

组件生命周期componentWillMount现已弃用，这意味着您不应再使用它。用它componentDidMount代替。从功能上讲，它们在您的示例中应该没有区别

我创建了一个函数，它if (this.state.TodoList)根据条件评估和返回对象。
2021-05-28 06:39:47

  1. 最初，render 方法是在 cwm 方法之后调用的。所以控制台日志第一次显示状态的空值。

  2. 但是你已经在 cwm 方法中运行了一个异步操作，所以在它完成之后，setstate 方法被调用，这导致渲染方法再次运行。

注意：不推荐使用 ComponentWillMount、componentWillUpdate 和 componentWillUpdate props 方法。

您应该将此 API 调用移动到 componentDidmount 或 ComponentDidUpdate 方法。

但是，在此之后，您的控制台日志将出现两次 - 第一次用于初始渲染，第二次用于 API 调用后调用的 setstate。

注意 :componentWillMount已弃用，将在版本 17 之前有效。

来源 - https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

最适合调用 API 的 React Lifecycle： componentDidMount是执行 API 调用、setTimeouts 等异步任务的首选方法。

它会像 -

  1. 在componentDidMount您的 API 上被调用

  2. 根据生命周期顺序，最后将调用 render 方法。（仍然 API 没有返回响应）。您的 UI 在初始绘制时显示。

  3. API 获得响应后，您使用this.setState()which 将强制重新渲染操作。
  4. 再次更新您的 UI 更改

请记住：this.setState()无论您在生命周期方法中调用过一次还是多次，都只会调用一次

其它你可能感兴趣的问题
上一篇FlatList 调用两次 下一篇如何将 Twitter 小部件嵌入 Reactjs？