如何在React中将fetch请求返回的数据填充到div元素展示

1. 完善请求逻辑，将返回数据存入state #

首先需要在组件初始化时声明对应state字段存储数据，再修改fetch的回调逻辑，把接口返回的result写入state：

// 类组件初始化state示例
constructor(props) {
  super(props);
  this.state = {
    predictData: null, // 存储预测接口返回数据
    loading: false, // 加载状态标记
    requestError: null // 错误信息存储
  }
}

// 修改后的fetch请求逻辑
fetch("https://flask-api-test1.herokuapp.com/predict", {
  method: "post",
  body: formData,
})
  .then((res) => res.json())
  .then((result) => {
    // 写入state，触发组件重新渲染
    this.setState({
      predictData: result,
      loading: false
    })
  })
  .catch((err) => {
    this.setState({
      requestError: err.message,
      loading: false
    })
    console.log(err);
  });

2. 在render方法中读取state渲染到div #

在组件的render函数中根据不同状态渲染对应内容，读取state中的字段填充到页面节点：

render() {
  const { predictData, loading, requestError } = this.state;

  // 加载中状态
  if (loading) return <div>请求处理中，请稍候...</div>
  // 错误状态
  if (requestError) return <div>请求出错：{requestError}</div>

  return (
    <div className="predict-result">
      {/* 确认数据存在后再读取对应字段，避免空值报错 */}
      {predictData && (
        <>
          <div>预测结果：{predictData.predict}</div>
          <div>结果置信度：{predictData.probability}</div>
          {/* 如果返回数据是数组，用map遍历渲染即可，注意加唯一key属性
          {predictData.map((item, idx) => (
            <div key={idx}>
              条目{idx+1}内容：{item.content}
            </div>
          ))}
          */}
        </>
      )}
    </div>
  )
}

注意事项 #

• 类组件中调用setState后会自动触发render重新执行，拉取最新state值渲染页面
• 读取state中存储的接口数据前，必须先判断数据是否已存在，避免接口未返回时读取属性报错
• 如果是函数组件，使用useState声明状态存储变量，请求回调中调用状态更新函数写入数据即可，渲染逻辑和类组件一致

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