如何提取fetch请求的结果插入JSX 解决React无效子节点报错

• 该报错本质是违反了React的JSX渲染规则，把不可序列化的Promise对象直接作为子节点传入了渲染流程。
• 原生fetch方法的返回值本身是Promise实例：当前实现把整段fetch链式调用写在JSX的花括号渲染区域内，React在执行同步渲染逻辑时，根本等不到异步请求的结果返回，第一时间拿到的是处于pending状态的Promise对象。
• React允许作为JSX子节点渲染的内容仅包含：字符串、数字、已经构建完成的DOM元素/组件、可遍历的数组、null/undefined。Promise、普通对象这类无法被React序列化识别的内容，传入后就会触发指定的报错。
• 实现中还存在一处隐藏逻辑bug：在处理接口返回数据的.then回调中，data.map前没有添加显式return，就算后续异步流程走完，也无法返回需要渲染的列表元素，最终拿到的是undefined值。

React函数组件内的异步请求，必须配合状态管理和生命周期钩子完成流程，不能直接内嵌在JSX的渲染块中执行：

• 用useState钩子维护接口返回的帖子列表数据，初始值设为空数组，避免首次渲染时出现数据读取错误
• 用useEffect钩子在组件首次挂载完成后，触发fetch异步请求，待请求拿到结果后，通过状态更新方法触发组件重渲染
• JSX区域内直接遍历状态中存储的真实数据，生成对应的渲染节点，注意给每个遍历项添加唯一的key属性

对应代码示例：

import React, { useState, useEffect } from "react";

export default function Card_Container() {
  // 初始化帖子列表状态
  const [postList, setPostList] = useState([]);

  // 组件挂载后执行异步请求
  useEffect(() => {
    fetch("http://localhost:1337/posts")
      .then((res) => res.json())
      .then((resData) => {
        // 请求成功后更新状态，触发重渲染
        setPostList(resData);
      })
      .catch((err) => {
        console.error("接口请求异常：", err);
      });
  }, []);

  return (
    <div>
      {postList.map((post) => {
        // 显式return生成对应节点，补充唯一key属性
        return <h1 key={post.id}>{post.blogtitle}</h1>;
      })}
    </div>
  );
}

• 不要在JSX花括号包裹的同步渲染逻辑中，直接嵌入完整的异步请求链式调用。同步执行的渲染流程不会等待异步请求的结果返回，最终传入React的永远是初始的Promise对象。
• 调用数组map方法生成JSX节点时，要么用箭头函数的隐式返回特性直接生成新数组，要么显式书写return语句，否则会默认返回undefined，导致页面渲染内容为空。

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