Question

我下面有这个onChange方法及其相关的函数调用，用于React-Jsonschema-Form。我面临的问题是，当传递给computeValueByFormula时，newFormData无法传递异步值。

onChange = ({ schema, formData }) => {
    const { properties } = schema

    this.updateTotalCell(properties)

    lookUpValue(properties, formData).then(newFormData => {
        const newFormData2 = computeValueByFormula(properties, newFormData)
        this.setState({ formData: newFormData2 })
    })
}

// recursive function to do math calculation on string formula input
// use case: mathCalculation("1 * 2 + 4 / 2 - 6")
export function mathCalculation (formula) {
  const plusOperator = '+'
  const minusOperator = '-'
  const multiplyOperator = '*'
  const divideOperator = '/'

  if (formula.indexOf(plusOperator) > 0) {
    const operands = formula.split(plusOperator)
    let total = 0

    operands.forEach(operand => {
      total = total + mathCalculation(operand)
    })

    return total
  }

  else if (formula.indexOf(minusOperator) > 0) {
    const operands = formula.split(minusOperator)
    let total = 0

    operands.forEach((operand, index) => {
      if (index === 0) {
        total = mathCalculation(operand)
      } 
      else {
        total = total - mathCalculation(operand)
      }
    })

    return total
  }

  else if (formula.indexOf(multiplyOperator) > 0) {
    const operands = formula.split(multiplyOperator)
    let total = 1

    operands.forEach(operand => {
      total = total * mathCalculation(operand)
    })

    return total
  }

  else if (formula.indexOf(divideOperator) > 0) {
    const operands = formula.split(divideOperator)
    let total = 1

    operands.forEach((operand, index) => {
      if (index === 0) {
        total = mathCalculation(operand)
      }
      else {
        total = total / mathCalculation(operand)
      }
    })

    return total
  }

  return Number(formula)
}

// compute field value based on value of other fields
export function computeValueByFormula (properties, formData) {
  let newFormData = {...formData}

  Object.keys(properties).forEach(key => {
    if (properties[key].formula) {
      const formula = properties[key].formula

      let operands = formula.replace(/\+|-|\*|\//g, ' ').split(' ')
      operands = operands.map(operand => formData[operand])

      if (properties[key].type === 'number') {
        const operators = formula.replace(/\w/g, '').split('')
        const updatedFormula = operands.map(operand => operators.length > 0 ? operand + operators.shift() : operand).join('')
        newFormData[key] = mathCalculation(updatedFormula)
      }
      else if (properties[key].type === 'string'){
        newFormData[key] = operands.join(' ')
      }
    }
    else if (properties[key].type === 'array') {
      if (formData[key] !== undefined) {
        newFormData[key].forEach((item, childKey) => {
          newFormData[key][childKey] = computeValueByFormula(properties[key].items.properties, formData[key][childKey])
        })
      }
    }
  })

  return newFormData
}

// lookup value based on value of other field
export function lookUpValue (properties, formData, parentFieldName, parentFormData) {
  let newFormData = {...formData}

  Object.keys(properties).forEach(async (key) => {
    if (properties[key].lookup) {
      const { collection, field, parameterField } = properties[key].lookup

      if (parentFormData !== undefined) { // pattern is in array field item
        if (parameterField.indexOf(':') > 0) { // parsing array field item
          const arrayRef = parameterField.split(':')
          const arrayField = arrayRef[0]
          const itemField = arrayRef[1]

          if (arrayField === parentFieldName) {
            const lookupValue = formData[itemField]
            newFormData[key] = await axios.get(`${API_URL}/record-lookup?collection_id=${collection}&lookup_field=${itemField}&lookup_value=${lookupValue}&lookup_target_field=${field}`)
              .then(res => res.data.data)
          }
        } else {
          const lookupValue = parentFormData[parameterField]
          newFormData[key] = await axios.get(`${API_URL}/record-lookup?collection_id=${collection}&lookup_field=${parameterField}&lookup_value=${lookupValue}&lookup_target_field=${field}`)
            .then(res => res.data.data)
        }
      } else {
        const lookupValue = formData[parameterField]
        newFormData[key] = await axios.get(`${API_URL}/record-lookup?collection_id=${collection}&lookup_field=${parameterField}&lookup_value=${lookupValue}&lookup_target_field=${field}`)
          .then(res => res.data.data)
      }
    }
    else if (properties[key].type === 'array') {
      if (formData[key] !== undefined) {
        newFormData[key].forEach(async (item, childKey) => {
            newFormData[key][childKey] = await lookUpValue(properties[key].items.properties, formData[key][childKey], key, formData).then(data => data)
        })
      }
    }
  })

  return Promise.resolve(newFormData)
}

我要完成的工作是根据用户在表单上的输入查找一个值。假设我在数据库上有一个货币表，每当用户更改货币名称的下拉选择时，另一个应该持有货币汇率的字段将进行服务器调用，以从数据库中获取相关货币数据。

此字段将在架构上具有查找字段。与具有数学计算功能的字段相同，方案中将具有公式字段。

以某种方式在服务器调用之后，它将在其他位置更新formData，但是传递给computeValueByFormula的formData不会更新。即使我没有传播运算符也直接传递了它。

这使我在表单上有一个空白字段，而在formData上却有值。

注意：评估数组字段项所需的函数的递归形式。

Answer 1

您将通过返回PrivateRoute立即使用lookUpValue解决newFormData函数。这不会等待在Promise.resolve(newFormData)循环内完成任何异步回调。由于Object.keys(...).forEach(...)具有一些异步计算，因此应等待它们完成。

如果将lookUpValue标记为lookUpValue，则可以在async循环中省略async关键字，它应该等待Object.keys(...).forEach(key => {...})调用。

不过有一个警告：它将为每个await调用依次运行，因此可能需要一些时间。在这种情况下，最好创建多个Promises，然后通过await并行等待它们。

使用并行方法可能会提高性能，但也可能由于竞争条件而引入错误。尤其是因为您要递归检查状态，所以可能会涉及其他复杂性。

Javascript异步值不会传递给下一个函数调用

1 个答案: