React开发中如何从首次接口返回数组的内嵌url二次拉取并存储数据

1. 存储结构设计 #

用映射类型的state存储对应数据，避免遍历匹配的性能损耗，同时可以单独维护每条请求的加载、错误状态：

// 存储每条数据id对应的url拉取结果
const [detailMap, setDetailMap] = useState({})
// 存储每条请求的加载状态
const [loadingMap, setLoadingMap] = useState({})
// 存储每条请求的错误信息
const [errorMap, setErrorMap] = useState({})

2. 批量拉取逻辑实现 #

在原有列表数据拉取成功后，自动触发每个url的请求，这里通过监听列表state的变更实现，同时会自动跳过已拉取过的数据，避免重复请求：

// 你的原有列表拉取逻辑
const [list, setList] = useState([])
useEffect(() => {
  axios
    .get(`someurl`)
    .then((response) => setList(response.data));
}, []);

// 新增：监听列表变更，批量拉取每个url的详情
useEffect(() => {
  if (!list.length) return;
  list.forEach(item => {
    // 已加载/加载中的数据跳过请求
    if (detailMap[item.id] || loadingMap[item.id]) return;
    // 标记当前项加载中
    setLoadingMap(prev => ({ ...prev, [item.id]: true }));
    axios.get(item.url)
      .then(res => {
        // 存储当前id对应的返回结果
        setDetailMap(prev => ({ ...prev, [item.id]: res.data }));
        setErrorMap(prev => ({ ...prev, [item.id]: null }));
      })
      .catch(err => {
        setErrorMap(prev => ({ ...prev, [item.id]: err.message }));
      })
      .finally(() => {
        setLoadingMap(prev => ({ ...prev, [item.id]: false }));
      })
  })
}, [list])

3. 表格渲染使用 #

渲染时直接通过当前行的id从映射state中取对应状态和结果即可：

<table>
  <tbody>
    {list.map(item => (
      <tr key={item.id}>
        <td>{item.title}</td>
        <td>{item.userId}</td>
        {/* 详情列 */}
        <td>
          {loadingMap[item.id] ? '加载中...' :
           errorMap[item.id] ? `加载失败：${errorMap[item.id]}` :
           detailMap[item.id]?./* 替换为你要展示的详情字段 */}
        </td>
      </tr>
    ))}
  </tbody>
</table>

优化建议 #

• 若列表数据量超过10条，不建议一次性批量发起请求，会触发浏览器同域名请求并发限制，可改为分批请求或点击行时懒加载对应详情
• 组件卸载时可通过axios的CancelToken取消未完成的请求，避免内存泄漏
• 如果不需要单独维护详情状态，也可以直接将详情合并到原list数组的对应元素中，适合数据量小的简单场景

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