鍵未定義 - React 數組 map

Question

我正在修改一些代碼以使用 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：

JSON 顯示“member_id 字段”

該錯誤清楚地告訴我定義“member_id”，但我不確定具體如何或在何處執行此操作。

如果我刪除 'key={member_id}' 然后代碼會編譯並運行，但會發出警告“列表中的每個孩子都應該有一個唯一的“key”道具。”。

我已經在 Stack Exchange 和 React 文檔上回顧了許多類似的問題，但仍然看不出為什么我的代碼不起作用。

Answer 1

你從請求中得到的是一個 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;