React SWR组件获取数据后未更新渲染，请求排查原因

你遇到的问题核心是map回调函数没有返回<li>元素：JavaScript中箭头函数如果用大括号包裹代码逻辑，必须显式使用return语句返回值，否则默认返回undefined，导致map生成的数组全是undefined，自然渲染不出任何列表项。

另外还需要补充边界判断：当missions还未加载完成（isLoading为true）或者加载出错时，不要执行map操作，避免触发Cannot read property 'map' of undefined的错误。

修正后的代码如下：

const MissieDetail = () => {
  const { data: missions, isLoading, error } = useSWR('GetMissions', GetMissions, {
    onSuccess(data, key, config) {
      console.log(data)
    }
  })

  let content
  if (isLoading) { 
    content = <p>Loading...</p> 
  } else if (error) { 
    content = <p>{error.message}</p> 
  } else if (missions?.length) {
    content = (
      <ul>
        {missions.map((mission) => {
          // 显式返回li元素
          return <li key={mission.id}>{mission.titel}</li>
          // 或者去掉大括号，用箭头函数隐式返回：
          // <li key={mission.id}>{mission.titel}</li>
        })}
      </ul>
    )
  } else {
    content = <p>No missions found.</p>
  }

  return (
    <main>
      <h2>Mission List</h2>
      {content}
    </main>
  )
}

关键修正点： #

• 在map回调中添加return语句，或者去掉大括号使用箭头函数的隐式返回
• 使用else if链式判断，确保只有在数据加载完成且存在时才渲染列表
• 新增空数据状态的提示，提升用户体验

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