reactjs - 从 REST API 获取数据时会调用渲染两次

Question

我正在尝试使用 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>;
  }
}

这是我在控制台中看到的内容:

Answer 1

这是完全正常的。

您的App组件流程如下:

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

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

更新:

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