React中map遍历API返回数组仅显示一条数据的问题求助

问题根源 #

1. 数据存储嵌套错误：在getAllVideos函数中，你将本身已是数组的data.results额外包裹了一层数组：

return setVideos([data.results])

这导致videos的结构变为[[{...}, {...}, {...}]]，是嵌套数组而非直接的对象数组。

2. 渲染逻辑错误：使用flatMap(([v], index) => ...)时，你对videos的唯一元素（即包含3条数据的数组）做了解构，仅取了数组的第一个元素v，因此只会渲染第一条记录。

修复步骤 #

1. 修正数据赋值

将setVideos([data.results])改为直接赋值data.results，让videos成为正确的对象数组：

return setVideos(data.results)

2. 简化渲染逻辑

直接使用map遍历数组，无需flatMap和解构，同时优先使用数据的唯一标识作为key（React最佳实践）：

{videos.map((v) => (
  <div key={v.id}>
    <h3>Title: {v.title}</h3>
    <p>Description: {v.description}</p>
    <p>URL: {v.url}</p>
    <p>Category: {v.category_name}</p>
  </div>  
))}

额外潜在问题修复 #

你的validateToken是异步函数，但getAllVideos中if(validateToken(token))判断的是Promise对象（永远为真），导致token验证逻辑失效，建议修正为：

let validateToken = async (token) => {
  let data = await config.validateToken(token);
  if (data.code === "token_not_valid") {
    await setToken(config.refreshToken(localStorage.getItem("refresh")));
    return false;
  } else {
    console.log("Valid Token");
    return true;
  }
}

let getAllVideos = async () => {
  const isValid = await validateToken(token);
  if (isValid) {
    let response = await fetch(`${config.URL}videos/`,{
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
    }
    })
    let data = await response.json()
    return setVideos(data.results)
  } else {
    setToken(await config.refreshToken(token));
  }
}

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