reactjs 确保在重新呈现组件时执行componentDidMount中的代码

mccptt67 于 11个月前发布在 React

关注(0)|答案(3)|浏览(83)

我已经调试了我的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方法在第一次加载组件时和需要更新状态并重新加载组件时都能运行？
谢谢你，谢谢

reactjs

来源：https://stackoverflow.com/questions/51159493/ensure-that-code-in-componentdidmount-is-executed-when-a-component-is-re-rendere

3条答案

按热度按时间

v09wglhw1#

您可以将逻辑放在一个单独的方法中，并在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() {
    // ...
  }
}

字符串

赞(0）回复(0）举报 11个月前

5cnsuln72#

您可以在componentDidMount和componentDidUpdate中执行API调用。
请参阅componentDidUpdate的文档。

赞(0）回复(0）举报 11个月前

b5buobof3#