如何对通过fetch获取的useContext管理的数据执行map遍历处理？

首先整理现有代码的核心问题：

• 直接在组件顶层执行mapedData()会触发无限重渲染：每次调用setInfo都会触发组件重渲染，重渲染后又会重新执行mapedData()，进入死循环
• data.map(el => el)属于冗余操作，仅对原数组做了浅复制，没有实际加工逻辑，如果你需要对元素做处理要补充对应的逻辑
• 未做非空校验：fetch请求返回前data大概率是undefined或null，直接调用map会抛出类型错误
• 存在拼写错误：代码里的setIfno应为setInfo

场景1：仅需渲染遍历后的内容，无需本地存储 #

如果不需要把加工后的数据存到本地state，直接在JSX里遍历即可，不需要额外定义状态和处理函数：

import { useContext } from 'react'
import { YourContext } from 'xxx/你的context文件路径'

function 你的组件名() {
  const { data } = useContext(YourContext)

  return (
    <div>
      {/* 先判断data存在再遍历 */}
      {data?.map((item, index) => (
        <div key={index}>
          {/* 这里写你要渲染的内容，比如展示item的对应字段 */}
          {item.需要展示的字段名}
        </div>
      ))}
    </div>
  )
}

这里用了可选链?.做非空判断，也可以替换成data && data.map()的写法

场景2：需要将加工后的数据存到本地state #

如果确实需要把处理后的数据存在本地state，要把加工逻辑放在useEffect中，依赖项设置为context的data，只有data变化时才重新执行：

import { useContext, useState, useEffect } from 'react'
import { YourContext } from 'xxx/你的context文件路径'

function 你的组件名() {
  const { data } = useContext(YourContext)
  const [info, setInfo] = useState([])

  useEffect(() => {
    // 先判断data存在再执行遍历
    if (!data) return
    // 这里替换成你的实际加工逻辑，比如提取所有item的name字段
    const processedData = data.map(el => el.你需要提取/加工的内容)
    setInfo(processedData)
  }, [data]) // 依赖项为data，仅当data变化时才重新执行逻辑

  // 后面直接用info变量即可
  return <div>{/* 渲染info的逻辑 */}</div>
}

注意useEffect的依赖项必须完整添加用到的外部变量，这里仅用到data，所以只填data即可

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