React组件中如何在返回的JSX中使用获取到的数据？

问题根源 #

1. 初始状态类型不匹配：你将myData初始值设为空字符串''，但接口返回的是数组类型。组件首次渲染时，myData是空字符串，直接访问myData[0].name会触发Cannot read properties of undefined (reading 'name')错误，导致组件崩溃——这就是硬刷新后无反应的核心原因，组件崩溃后后续fetch回调即使完成也无法更新UI。
2. useState更新的异步性：第三个.then()里打印myData仍是初始值，因为setData是异步批量更新操作，不会立即修改state，要等到下一次组件渲染才能拿到最新值。

解决方案 #

1. 修正初始状态

将myData的初始值设为空数组[]，与接口返回的数据类型保持一致：

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

2. 条件渲染避免报错

在渲染时先判断数据是否就绪，再访问属性，常用方式有三种：

• 可选链操作符（最简洁）：

return (
  <div>{myData[0]?.name}</div>
)

• 基础条件判断：

return (
  <div>{myData.length > 0 ? myData[0].name : '加载中...'}</div>
)

• 新增加载状态（提升用户体验）：

const [myData, setData] = useState([])
const [loading, setLoading] = useState(true)

useEffect(() => {
    fetch('https://recipesapi2.p.rapidapi.com/recipes/tomato%20soup', options)
      .then((res) => res.json())
      .then((data) => {
        setData(data.data);
        setLoading(false);
      })
      .catch(err => {
        console.error('请求失败:', err);
        setLoading(false);
      })
  },[])   

if (loading) {
  return <div>加载中...</div>
}

return (
  <div>{myData[0]?.name}</div>
)

3. 改用Async/Await简化代码

React不允许组件函数本身为async，但可以在useEffect的回调函数内部使用async/await，写法更直观：

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await fetch('https://recipesapi2.p.rapidapi.com/recipes/tomato%20soup', options);
      const data = await res.json();
      setData(data.data);
      setLoading(false);
    } catch (err) {
      console.error('请求失败:', err);
      setLoading(false);
    }
  }
  fetchData();
},[])   

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