如果我从API提取数据后将状态设置为内部，组件会被两次挂载

Question

在呈现组件时，似乎已经调用了两次componentDidMount，并且由于已经验证了帐户，因此从服务器接收到了不同的数据。我希望只调用一次componentDidMount。

import React, { Component, Link, Redirect } from 'react'
import axios from 'axios'
import cookies from '../cookies'

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

  componentDidMount = () => {
    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)
          this.props.update()
        }
      })
      .catch(err => {
        const { data } = err.response
        console.log('this.state :', this.state)
        this.setState({
          errorMessage: data,
        })
      })
  }

我尝试使用应该带有标志的组件更新，但是它也不起作用。有什么办法吗？

shouldComponentUpdate(nextProps, nextState) {
  if(this.state.dataWasFetched) {
    return false
  } 
  return true
}

Answer 1

如果您在其中设置了setState，则会调用两次独立的componentDidMount（），您将无法禁用它。

我可以给您的建议是在调用api之前检查state.dataWasFetched是否为真，因此您对api的请求仅第一次调用一次。

您也可以在componentWillMount中进行调用，但这是_UNSAFE，因此请谨慎使用！ （不推荐）