如何打印通过Context API传递的数组中匹配用户条件的指定元素？

代码错误点梳理 #

• 变量名拼写错误：findspecificcountry 函数中引用了未定义变量myuserlist，实际定义的用户数组变量名为userlist
• ulocations 初始化错误：原代码取state.categoriesAPI.locationapi[0]赋值，导致ulocations成为单个对象而非预期的对象数组，后续遍历length属性会失效
• map 回调语法错误：没有返回JSX元素，多个同级JSX标签未包裹在根节点中，变量插值未使用大括号{}包裹，导致内容直接渲染为静态字符串
• 匹配逻辑复用性差：findspecificcountry 未接收参数，固定取数组第一个用户的location_id匹配，当userlist存在多个用户时会全部返回同一个地区名，无匹配结果时也未设置默认返回值，可能导致渲染异常

修复后完整代码 #

const state = useContext(GlobalState)
// 移除[0]，直接取完整的地区数组赋值
const [ulocations] = useState(state.categoriesAPI.locationapi) 

const [userlist] = useState([{location_id:'5476',name:'John', age:36}])

// 接收当前用户的location_id作为入参，无匹配时返回默认值
const findSpecificCountry = (locationId) => {
  for(let i = 0; i < ulocations.length; i++){
    if(ulocations[i]._id == locationId){
      return ulocations[i].name
    }
  }
  return '未知地区'
}

return(
  <>
    {
      userlist.map(a => (
        // map渲染的根元素添加唯一key属性，避免React警告
        <div key={a.location_id}>
          <h1>{a.name}</h1>
          <h2>{a.age}</h2>
          <h3>{findSpecificCountry(a.location_id)}</h3>
        </div>
      ))
    }
  </>
)

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