Question

一段时间以来，我一直在调试我的React Web应用程序，试图弄清楚为什么我的状态没有在其中一个组件中显示更新。

我终于意识到我正在组件中使用axios：

async componentDidMount() {
    axios.get(`/api/dungeon_generation/texture-files/${this.props.genId}/files`)
        .then((response) => {
            this.setState({ files: response.data })
            console.log("axios get: ", this.state.files);
        })
        .catch((error) => {
            console.log(error);
        });
}

因此，当我重新加载该组件时，componentDidMount不会再次被调用。

如何更改它，以便在首次加载组件时以及需要更新状态并重新加载状态时都运行axios.get方法？

谢谢！

Answer 1

componentDidMount仅在首次在DOM中安装组件时才被调用一次。重新渲染组件后，将调用componentDidUpdate。初始渲染不会调用componentDidUpdate。因此，如果这是某种后期渲染操作，请同时使用componentDidMount和componentDidUpdate。

Answer 2

您可以同时在componentDidMount和componentDidUpdate中进行API调用。

在此处查看componentDidUpdate的文档。

Answer 3

您可以将逻辑放在单独的方法中，并在componentDidMount属性更改时在componentDidUpdate和genId中调用它。

示例

class App extends React.Component {
  componentDidMount() {
    this.fetchData(this.props.genId);
  }

  componentDidUpdate(prevProps) {
    if (this.props.genId !== prevProps.genId) {
      this.fetchData(this.props.genId);
    }
  }

  fetchData = (genId) => {
    axios.get(`/api/dungeon_generation/texture-files/${genId}/files`)
      .then((response) => {
        this.setState({ files: response.data })
        console.log("axios get: ", this.state.files);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  render() {
    // ...
  }
}

确保在重新渲染组件时执行componentDidMount中的代码

3 个答案: