API опроса, пока статус задачи не будет установлен на «COMPLETELY_SIGNED» с помощью React - PullRequest
Новая
       8

API опроса, пока статус задачи не будет установлен на «COMPLETELY_SIGNED» с помощью React

0 голосов
/ 08 сентября 2018

У меня есть функция fetch и update для выполнения задач. Когда я вызываю функцию update, taskId изменяется, поэтому мне нужно проверить, является ли состояние задачи «COMPLETELY_SIGNED» для загрузки следующего компонента. 

async process({action, request}, dispatch, done) {
const {form} = action.payload

try {
  const params = {
    taskId: form.taskId,
    password: form.password
  }
  dispatch(resetTaskFormErrors())
  const response = await request({
    method: 'POST',
    url: 'task/update',
    params: params,
    data: form.taskRequest
  })
  dispatch(updateTaskSuccess(response.data))
  dispatch(fetchTask(response.data.id)) }

Поэтому я вызываю функцию выборки, используя новый идентификатор задачи, чтобы проверить, имеет ли статус задачи «COMPLETELY_SIGNED». К сожалению, состояние задачи не изменится быстро, поэтому мне нужно опросить API выборки, чтобы проверить, пока статус не станет «COMPLETELY_SIGNED».

Когда задача будет обновлена, в ответе будет объект editor. Это используется, чтобы проверить, обновлена ​​ли задача в componentWillRecieveProps

Поэтому я решил справиться со сменой реквизита в componentWillRecieveProps

UNSAFE_componentWillReceiveProps(nextProps) {
    if (!isEqual(nextProps.buyerOTPForm, this.state.task)) {
      if (nextProps.buyerOTPForm.otpData.editor &&
        nextProps.buyerOTPForm.status !== 'COMPLETELY_SIGNED') {
        this.props.fetchTask(nextProps.buyerOTPForm.otpData.id)
      }
      else if (nextProps.buyerOTPForm.otpData.editor &&
        nextProps.buyerOTPForm.status === 'COMPLETELY_SIGNED') {
        this.setState({
          isApproved: true
        })
      }
      this.setState({
        task: nextProps.buyerOTPForm.otpData,
        errors: nextProps.buyerOTPForm._errors,
        ...nextProps.signingSuccess ? {
          isSigning: false
        } : {},
        ...nextProps.rejectingSuccess ? {
          isRejecting: false
        } : {}
      }, () => {
        this.propertyPriceValidation()
      })
    }   }

Я получаю бесконечный цикл здесь. Как я могу решить мою проблему?

1 Ответ

0 голосов
/ 08 сентября 2018

Проблема в том, что вы не сравниваете текущий реквизит с предыдущими, а непосредственно выполняете setState. Вам нужно проверить текущие реквизиты с предыдущими реквизитами, и если они не равны, тогда сделайте setState. Приведенный ниже код должен работать 

 UNSAFE_componentWillReceiveProps(nextProps){
  if(nextProps.buyerOTPForm.otpData !== this.props.buyerOTPForm.otpData){
  if (nextProps.buyerOTPForm.otpData.editor &&
    nextProps.buyerOTPForm.status !== 'COMPLETELY_SIGNED') {
    this.props.fetchTask(nextProps.buyerOTPForm.otpData.id)
  }
  else if (nextProps.buyerOTPForm.otpData.editor &&
    nextProps.buyerOTPForm.status === 'COMPLETELY_SIGNED') {
    this.setState({
      isApproved: true
    })
  }
  this.setState({
    task: nextProps.buyerOTPForm.otpData,
    errors: nextProps.buyerOTPForm._errors,
    ...nextProps.signingSuccess ? {
      isSigning: false
    } : {},
    ...nextProps.rejectingSuccess ? {
      isRejecting: false
    } : {}
  }, () => {
    this.propertyPriceValidation()
  })
}
}

Метод, который он сам называет небезопасным, поэтому всякий раз, когда ваш компонент получает новые реквизиты, этот метод вызывается, а также этот метод вызывается дважды без причины, и поэтому это небезопасно. Вам необходимо проверять текущие реквизиты с предыдущими реквизитами всегда, когда вы хотите выполнить setState в этом методе, чтобы избежать бесконечного цикла.

...