我有一個 Json 檔案，其中包含有關各種設備的資訊：
{
"devices": {
"deviceList": [
{
"name": "iPhone X",
"id": "193ywpe740",
"deviceType": "Mobile",
"os": "iOS",
"brand": "Apple",
"quantity": 3,
},
{
"deviceType": "Tablet",
"name": "Apple iPad (Wi-Fi, 32GB) - Gold",
"brand": "Apple",
"os": "MacOS",
"id": "1563175150",
"quantity": 5
},
{...}
我的 cardList js 檔案：
import ReservationsListCard from "components/reservationsListCard";
const CardListSection = () => {
const devices_url =
"devices.json";
const [listDevices, setListDevices] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const devicesResponse = await fetch(devices_url);
const devicesJson = await devicesResponse.json();
const [listDevices] = devicesJson.devices.deviceList;
setListDevices(listDevices);
} catch (error) {
//console.log("error", error);
}
};
fetchData();
}, []);
return (
<div className="device-list-section">
{listDevices.map((device) => (
<ReservationsListCard key={device.id} />
))}
{console.log(listDevices)}
</div>
);
};
export default CardListSection;
我想要實作的是獲取每個設備的“id”并將其傳遞給我的ReservationsListCard組件，然后該組件獲取該 id 并顯示設備名稱、品牌、影像等，但我一直遇到標題中的錯誤. 我可能做錯了什么？我的理論是我沒有選擇設備的 ID。或者它可能是組件ReservationsListCard的問題？
uj5u.com熱心網友回復：
錯誤在行中
const [listDevices] = devicesJson.devices.deviceList;
您正在嘗試解構（拉出）設備串列的第一個元素并將其分配給串列設備，但您實際上只想將 listDevices 設定為設備串列。嘗試
const listDevices = devicesJson.devices.deviceList;
發生錯誤是因為 listDevices 被分配給串列中的第一個設備，該設備是一個物件并且沒有map功能
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/396297.html
標籤：javascript 反应