React数组map报错'member_id'未定义，React Query场景下如何解决？

你遇到的member_id未定义错误，核心原因是没有通过当前遍历的对象访问属性：在map回调里，每个成员数据都存储在value变量中，接口返回的member_id是value的一个属性，直接写member_id会被JavaScript当作未声明的全局变量，自然触发报错。

修正方法非常直接，把key={member_id}改成key={value.member_id}，就能正确获取每个成员的唯一ID作为列表项的key。

修正后的完整代码：

import axios from 'axios';
import { useQuery } from '@tanstack/react-query'

function MembersList() {
  const { data } = useQuery(["members"], () => {
    return axios.get('http://localhost:3001/members').then((res) => res.data)
  })

  return (
    <div className="List">
      {data?.map((value) => {
        return (
          <div className="member">
            <div key={value.member_id}> {value.forename} {value.surname}</div>
          </div>
        );
      })}
    </div>
  );
}

export default MembersList;

额外补充两点注意事项：

• 你之前在map里声明的第二个参数key是遍历的索引，React不推荐用索引作为key（除非列表是静态、不会重排的），所以使用value.member_id是更规范的做法。
• 要确保接口返回的每个成员对象确实存在member_id字段，且值是唯一的，这样才能满足React对key唯一性的要求。

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