Компонент, при котором монтируется, вызывается дважды, если я устанавливаю состояние внутри после извлечения данных из условного API внутри, чтобы вызывать ax ios только один раз, не работает - PullRequest
Новая
       3

Компонент, при котором монтируется, вызывается дважды, если я устанавливаю состояние внутри после извлечения данных из условного API внутри, чтобы вызывать ax ios только один раз, не работает

0 голосов
/ 30 января 2020

К моменту рендеринга компонента кажется, что componentDidMount уже был вызван дважды, и поскольку учетная запись уже проверена, с сервера поступают разные данные.
Моя проблема в том, что мне нужен мой ключ API чтобы начать сеанс и иметь различные параметры, поступающие с сервера, определенного как логическое значение в объекте для условного рендеринга. Ключ API получен только для одной из этих опций, когда я только что подтвердил учетную запись.
componentDidMount вызывается дважды, поэтому в первый раз я получаю ключ API, но не во второй раз. Я попытался использовать условное выражение внутри componentDidMount, чтобы вызов API был выполнен один раз, но состояние очищается после первого раза, поэтому он по-прежнему вызывается дважды. 

class Verify extends Component {
  state = {
    APIkey: '',
    token: '',
    userHasJustBeenActivated: false,
    newTokenCreated: false,
    userDeleted: false,
    userAlreadyActivated: false,
    errorMessage: '',
    dataWasFetched: false,
  }

  componentDidMount = () => {
    console.log('this.state.dataWasFetched :', this.state.dataWasFetched)
    if (this.state.dataWasFetched) {
      return 
    } else {
      console.log('location :', this.props.location)
      axios
        .get(`/api/auth/verify${this.props.location.search}`)
        .then(res => {
          console.log(JSON.stringify(res.data))
          const {
            APIkey,
            userHasJustBeenActivated,
            newTokenCreated,
            userDeleted,
            userAlreadyActivated,
          } = res.data
          this.setState({
            APIkey: APIkey,
            userHasJustBeenActivated: userHasJustBeenActivated,
            newTokenCreated: newTokenCreated,
            userDeleted: userDeleted,
            userAlreadyActivated: userAlreadyActivated,
            dataWasFetched: true,
          }, () => {
            if (APIkey) {
              cookies.setCookie('session', APIkey)
              console.log('this.state :', this.state)
              this.props.update()
            }
          })
        })
        .catch(err => {
          const { data } = err.response
          this.setState({
            errorMessage: data,
          })
        })
    }
  }

Я попытался добавить условное выражение с dataWasFetched, чтобы вызов для API будет сделано только один раз, но кажется, что состояние очищается с каждым новым вызовом. Когда я проверяю консоль, значение state.dataWasFetched равно false, а this.state не регистрируется во втором вызове.

1 Ответ

0 голосов
/ 30 января 2020

Действительно, componentDidMount () вызывается дважды, если в нем setState, вы не сможете отключить это.

Советы, которые я могу вам дать, это проверить, является ли state.dataWasFetched истинным, перед вызовом API поэтому ваш запрос к API вызывается только один раз, в первый раз.

Вы также можете сделать свой вызов в componentWillMount, но это _UNSAFE, поэтому будьте осторожны при его использовании! (не рекомендуется)

РЕДАКТИРОВАТЬ: Если этого не сделать, следует проверить, где вызывается компонент проверки. Может быть, его родители ре-рендерит и поэтому дважды вызывает метод render с начальным состоянием.

...