React提交表单调用Express接口时UI不更新且报Promise无效子元素错误

问题原因 #

fetchMedianPrimeNumber是async声明的异步函数，调用后会返回Promise对象，而非接口返回的实际业务数据。你直接将这个Promise对象赋值给medianPrimeNumber状态，React渲染时无法将Promise识别为合法的子元素内容，因此触发报错。
你可以注意到componentDidMount生命周期中的调用写法是正确的：等待异步请求返回结果后，再在then回调中执行setState更新状态，你只要把handleSubmit的逻辑对齐即可。

修复方案 #

修改handleSubmit函数代码如下：

handleSubmit(e) {
  e.preventDefault()
  const inputNum = parseInt(this.state.formValue)
  // 异常校验：避免传入非数字
  if (isNaN(inputNum)) return
  this.fetchMedianPrimeNumber(inputNum)
    .then(res => {
      this.setState({ medianPrimeNumber: res.server })
    })
    .catch(err => console.log(err))
}

可选优化建议 #

• 可以新增isLoading状态，请求过程中展示加载提示，避免用户重复提交表单
• 渲染时对medianPrimeNumber做非空判断，空值阶段展示占位提示，避免页面空白

内容的提问来源于stack exchange，提问作者Manuel Abascal