键未定义 - React 数组映射答案

【问题标题】：Key not defined - React array map键未定义 - React 数组映射
【发布时间】：2023-01-14 08:46:47
【问题描述】：

我正在修改一些代码以使用 React Query 而不是 useEffect - 请参阅下面使用 React Query 的新代码：

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, key) => {
        return (
          <div className="member">
            <div key={member_id}> {value.forename} {value.surname}</div>
          </div>
        );
      })}
    </div>
  );
}

export default MembersList;

我收到“member_id”未定义的错误 - 由我尝试将“member_id”添加为键的行引起（见下文）。

Error Message

'Member_id' 是数组中的第一个字段，请参见下面来自 Insomnia 的 JSON：

JSON showing the 'member_id field'

该错误清楚地告诉我定义“member_id”，但我不确定具体如何或在何处执行此操作。

如果我删除 'key={member_id}' 然后代码会编译并运行，但会发出警告“列表中的每个孩子都应该有一个唯一的“key”道具。”。

我已经在 Stack Exchange 和 React 文档上回顾了许多类似的问题，但仍然看不出为什么我的代码不起作用。

【问题讨论】：

可能只需要它就像key={value.member_id}>
上面，加上键需要在返回的 JSX 的最外层元素上，所以向上移动一行到外层 div

标签： javascript reactjs arrays dictionary jsx

【解决方案1】：

使用key={value.member_id}或key={key}

【讨论】：

【解决方案2】：

你从请求中得到的东西是一个对象。一个对象可以被认为是一本字典，你查找一个词并且它有一个附加的定义。 member_id 只是您可以在此对象中查找的单词之一。现在，您没有指定 member_id 是什么，所以 javascript“认为”它应该是您定义的变量，类似于上面的 data。但是，您真正想要的是对象中存在的 member_id 的值。因此，您应该将其更改为 value.member_id，其中 value 是您的 data 列表中的对象之一。

一种直观的思考方式是这样的

data = [{...}, {...}, ...];
value = data[0]; // this is what map is doing except for 0...N-1 where N is the length of your list
value;
> {...}
value.member_id;
> 1

因此，将您的代码更改为：

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, key) => {
        return (
          <div className="member" key={value.member_id}> // <<<
            <div> {value.forename} {value.surname}</div>
          </div>
        );
      })}
    </div>
  );
}

export default MembersList;

【讨论】：