[英]Key not defined - React array map
我正在修改一些代码以使用 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”添加为键的行引起(见下文)。
'Member_id' 是数组中的第一个字段,见下面来自 Insomnia 的 JSON:
该错误清楚地告诉我定义“member_id”,但我不确定具体如何或在何处执行此操作。
如果我删除 'key={member_id}' 然后代码会编译并运行,但会发出警告“列表中的每个孩子都应该有一个唯一的“key”道具。”。
我已经在 Stack Exchange 和 React 文档上回顾了许多类似的问题,但仍然看不出为什么我的代码不起作用。
你从请求中得到的是一个 object。object 可以被认为是一本字典,你查找一个词,它有一个附加的定义。 member_id
只是您可以在此 object 中查找的单词之一。现在,您没有指定member_id
是什么,因此 javascript“认为”它应该是您定义的变量,类似于上面的data
。 但是,您真正想要的是 object 中存在的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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.