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

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

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

示例

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() {
    // ...
  }
}