React渲染Flask返回JSON响应时出现map读取未定义属性报错

报错是前后端数据结构、前端状态赋值、渲染逻辑三者不匹配导致的，具体问题点：

• 后端接口返回的响应结构只有Information字段，值为存储邮箱字符串的一维数组，根本不存在members属性，渲染阶段读取data.members时拿到的是undefined，对undefined调用map方法就会抛出你看到的类型错误。
• 接口请求回调里的状态赋值逻辑错误：接口返回的data.Information本身就是数组类型，你额外套了一层方括号，会把状态值变成二维数组，即使字段名写对也无法正常渲染。
• 渲染逻辑的遍历规则和实际数据结构不匹配：Information数组里直接存储的是邮箱字符串，不是带email属性的对象，即使找到正确的数组，读取member.email也会拿到undefined。

按顺序修改两处前端代码即可：

1. 修正useEffect中的状态赋值逻辑，去掉多余的数组包裹，代码修改如下：

const [data, setData] = useState([])

useEffect(() =>{
  fetch("/details")
    .then(res => res.json())
    .then(resData => {
      // 直接把接口返回的Information数组赋值给状态，不要额外套[]
      setData(resData.Information)
      console.log(resData)
    })
}, [])

注意：这里把回调里的参数名从data改成resData，避免和外层定义的状态名data产生变量遮蔽。

2. 修正条件渲染逻辑，去掉不存在的members字段，同时删除原代码末尾多余的</div>闭合标签，直接遍历存储邮箱的状态数组即可，修改后的渲染代码如下：

<div>
  {data.length === 0 ? (
    <p>Loading...</p>
  ) : (
    data.map((email, i) => (
      <h3 key={i}>{email}</h3>
    ))
  )}
</div>

补充提示：如果本地开发时React服务和Flask服务端口不一致，需要给fetch接口地址写全Flask服务的完整地址（比如http://127.0.0.1:5000/details），或者在React开发配置中添加代理规则，否则会出现请求404的问题。

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