Question

我在componentDidMount中有一个异步调用，当我刷新页面时，它按预期工作，但是当我从其他地方导航进入页面时，它调用了两次我的异步操作，我不知道为什么，下面是我的代码

export default class EditorWrap extends Component {
  constructor(props) {
    super(props)

    this.state = {
      loadedS3Credential: false
    }

    this.config = {
      placeholderText: 'edit here'
    }
  }

  async componentDidMount() {
    if (!this.state.loadedS3Credential) {

      console.log('fire')

      const imageUploadToS3 = await axios('/signS3').then(resp => resp.data)
      if (imageUploadToS3) {
        this.config = {
          ...this.config,
          imageUploadToS3
        }

        this.setState({
          loadedS3Credential: true
        })
      }
    }
  }

  render() {
    if (!this.state.loadedS3Credential) return null

    return (
      <EditorBody
        config={this.config}
      />
    )
  }
}

Answer 1

您正在使用异步方法，它将在组件中调用两次或更多次。只需删除即可解决您的问题。

快乐的编码！

使用react路由器导航时，componentDidMount触发两次

1 个答案: