componentDidMount срабатывает дважды при навигации с использованием реагирующего маршрутизатора

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

вы используете асинхронный метод, который он будет вызывать дважды или более в компоненте.Просто удалите это, и тогда ваша проблема будет решена.

Happy Coding!