为什么映射对象数组在 React js 中不起作用
[英]why mapping over array of objects doesn't work in react js
问题描述
PS: I added an edited version of the code down below. 
PS：我在下面添加了代码的编辑版本。
I have some JSON data that I extract from it the doctor's value and update the state with then I want to map on it and print out the values.我有一些 JSON 数据，我从中提取医生的值并更新状态，然后我想在其上映射并打印出这些值。 now it has only one doctor but later it can have more than one doctor that's why I want to map on it and print the values in fragment.现在它只有一位医生，但后来它可以有不止一位医生，这就是为什么我想在上面映射并打印片段中的值。
in the console .log I get this error在控制台.log 我得到这个错误
c-sessionfrag.js:50 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_id')
at handleloop (c-sessionfrag.js:50:1)
this is the JSON data这是 JSON 数据
{
"totalReservations": 1,
"allReservations": [
{
"_id": "62d5f88672dd3fadbeeee7d5",
"userId": {
"_id": "62cf836dbbb2ddfdcca4df4d",
"image": "https://res.cloudinary.com/devsalem/image/upload/v1657766765/YOU/fuiiwkvdxwgczpfkv4d9.jpg",
"name": "Hassan Ibrahim",
"mobilePhone": "01010644258",
"gender": "male",
"email": "nohahassan497@yahoo.com",
"birthDate": "1991-06-04",
"trustContact": "01016166161",
"contactRelation": "mom",
"sessions": [
"Individual Session"
]
},
"doctor": {
"_id": "62cf8f75bb6b1eb825e8ab93",
"image": "https://res.cloudinary.com/devsalem/image/upload/v1657769832/YOU/umf1hkh7mjtasd5zy0vr.jpg",
"name": "ruba hamed",
"mobilePhone": "01222990000",
"gender": "female",
"email": "drruba1111@gmail.com",
"birthDate": "22/4/1980",
"languages": [
"english, spanish, arabic"
],
"licIssuedDate": "22/2/1998",
"licExpiryDate": "22/2/1999",
"profession": "therapist",
"sessionPrice": "400"
},
"startDate": "12:00 pm",
"date": "2022-07-26",
"roomName": "6feb87ad-b0cb-4877-a5ed-44e0c1f79fd8"
}
]
}
but for some reason, it does not print anything.但由于某种原因，它不打印任何东西。 here is the array of data这是数据数组
0: {_id: '62cf8f75bb6b1eb825e8ab93', image: 'https://res.cloudinary.com/devsalem/image/upload/v1657769832/YOU/umf1hkh7mjtasd5zy0vr.jpg', name: 'ruba hamed', mobilePhone: '01222990000', gender: 'female', …}
1: {_id: '62cf8f75bb6b1eb825e8ab93', image: 'https://res.cloudinary.com/devsalem/image/upload/v1657769832/YOU/umf1hkh7mjtasd5zy0vr.jpg', name: 'ruba hamed', mobilePhone: '01222990000', gender: 'female', …}
2: {_id: '62cf8f75bb6b1eb825e8ab93', image: 'https://res.cloudinary.com/devsalem/image/upload/v1657769832/YOU/umf1hkh7mjtasd5zy0vr.jpg', name: 'ruba hamed', mobilePhone: '01222990000', gender: 'female', …}
3: {_id: '62cf8f75bb6b1eb825e8ab93', image: 'https://res.cloudinary.com/devsalem/image/upload/v1657769832/YOU/umf1hkh7mjtasd5zy0vr.jpg', name: 'ruba hamed', mobilePhone: '01222990000', gender: 'female', …}
length: 4
[[Prototype]]: Array(0)
here is my code这是我的代码
import React, { Component, Fragment } from "react";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import './c-session.css';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPhone, faCalendar } from "@fortawesome/free-solid-svg-icons";
import clientimg from '../../../pictures/0_GettyImages-1333254883.png';
import clientname from '../../../pictures/icons8-name-tag-48.png';
import clientdate from '../../../pictures/Icon material-date-range.png';
import clientsession from '../../../pictures/icons8-question-and-answer-session-with-speech-bubble-48.png';
import clientcall from '../../../pictures/icons8-video-call-64.png';
const CSessionFrag = (props) => {
console.log('hi noha ana l frag');
const navigate = useNavigate();
const token = props.token;
const [date, setDate] = useState();
const doctors = { doctor: [], user: [], startDate: "", date: "", roomName: "", sessionID: "" };
const [doctorsArray, setDoctorsArray] = useState(doctors);
const [doctorsNoha, setDoctorsNoha] = useState([]);
async function noha() {
await setDoctorsNoha([...doctorsNoha, doctorsArray.doctor]);
}
useEffect(() => {
axios.get('/reservation', {
headers: {
'token': token
}
})
.then(res => {
console.log('sesssssssssssion fragment of doctorProfile response', res.data.allReservations[0].doctor);
console.log('sesssssssssssion fragment of doctorProfile response', res.data.allReservations[0].roomName);
setDate(res.data.allReservations[0].date)
const reserv = res.data.allReservations;
async function handleloop(reserv) {
for (var i = 0; i <= reserv.length; i++) {
await setDoctorsArray({
sessionID: reserv[i]._id,
startDate: reserv[i].startDate,
date: reserv[i].date,
doctor: reserv[i].doctor,
user: reserv[i].userId,
roomName: reserv[i].roomName
});
}
console.log('done loop');
}
handleloop(reserv);
noha();
// const allData = reserv[0].doctor;
// setImmediate(res.data.allReservations.date);
}).catch(e => {
console.log('sesion errooooooor', e);
})
}, []);
console.log('l arayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy', doctorsArray.doctor);
console.log('l doctorrrrrrrrrr', doctorsNoha);
return (
<Fragment>
{
doctorsNoha.map(doctor => {
<Fragment key={doctor._id} >
<div className="c-session_card">
<div className="c-session_card_top">
<img className="c-session_card_top_img" src={doctor.image} />
</div>
<div className="c-session_card_middle">
<p className="c-session_card_txt" id="c-session_card_name">
<img className="c-session_card_icon" id="c-session_name" src={clientname} />
{doctor.name}
</p>
<p className="c-session_card_txt" >
<img className="c-session_card_icon" src={clientcall} />
{doctor.profession}
</p>
<p className="c-session_card_txt" id="c-session_date_p" >
<img className="c-session_card_icon" id="c-session_date" src={clientdate} />
{date}
</p>
<p className="c-session_card_txt" id="c-session_date_p" >
<img className="c-session_card_icon" id="c-session_date" src={clientdate} />
{doctor.sessionPrice}
</p>
</div>
<div className="c-session_card_bottom">
<button className="c-session_card_bottom_btn" id="c-session_profile_btn" onClick={() => { navigate('/doctorprofile', { state: { docId: doctor._id } }) }}>Profile</button>
<button className="c-session_card_bottom_btn" id="c-session_call_btn" onClick={() => navigate('/startsession', { state: { docId: doctor._id } })}>
<FontAwesomeIcon
icon={faPhone}
id="c-session_call_btn_icon"
/>
Start Session
</button>
</div>
</div>
</Fragment >
})}
</Fragment >
);
}
export default CSessionFrag;
here is the edited code, it works without error but the doctorsNoha state is not updating, and on page load it creates an empty array这是编辑后的代码，它可以正常工作，但医生Noha状态没有更新，并且在页面加载时它会创建一个空数组
import React, { Component, Fragment } from "react";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import './c-session.css';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPhone, faCalendar } from "@fortawesome/free-solid-svg-icons";
import clientimg from '../../../pictures/0_GettyImages-1333254883.png';
import clientname from '../../../pictures/icons8-name-tag-48.png';
import clientdate from '../../../pictures/Icon material-date-range.png';
import clientsession from '../../../pictures/icons8-question-and-answer-session-with-speech-bubble-48.png';
import clientcall from '../../../pictures/icons8-video-call-64.png';
const CSessionFrag = (props) => {
console.log('hi noha ana l frag');
const navigate = useNavigate();
const token = props.token;
const [date, setDate] = useState();
const doctors = { doctor: [], user: [], startDate: "", date: "", roomName: "", sessionID: "" };
const [doctorsArray, setDoctorsArray] = useState(doctors);
const [doctorsNoha, setDoctorsNoha] = useState([]);
async function nohawait(doctorsArray) {
}
useEffect(() => {
axios.get('/reservation', {
headers: {
'token': token
}
})
.then(res => {
console.log('sesssssssssssion fragment of doctorProfile response', res.data.allReservations[0].doctor);
console.log('sesssssssssssion fragment of doctorProfile response', res.data.allReservations[0].roomName);
setDate(res.data.allReservations[0].date)
const reserv = res.data.allReservations;
async function handleloop(reserv) {
for (var i = 0; i < reserv.length; i++) {
await setDoctorsArray({
sessionID: reserv[i]._id,
startDate: reserv[i].startDate,
date: reserv[i].date,
doctor: reserv[i].doctor,
user: reserv[i].userId,
roomName: reserv[i].roomName
});
setDoctorsNoha(current => [...current, doctorsArray.doctor]);
}
console.log('done loop');
}
handleloop(reserv);
// const allData = reserv[0].doctor;
// setImmediate(res.data.allReservations.date);
}).catch(e => {
console.log('sesion errooooooor', e);
})
}, []);
console.log('l arayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy', doctorsArray.doctor);
console.log('l doctorrrrrrrrrr', doctorsNoha);
console.log('rommmmmnme', doctorsArray.roomName);
return (
<Fragment>
{
doctorsNoha.map(doctor =>
<Fragment key={doctor._id} >
<div className="c-session_card">
<div className="c-session_card_top">
<img className="c-session_card_top_img" src={doctor.image} />
</div>
<div className="c-session_card_middle">
<p className="c-session_card_txt" id="c-session_card_name">
<img className="c-session_card_icon" id="c-session_name" src={clientname} />
{doctor.name}
</p>
<p className="c-session_card_txt" >
<img className="c-session_card_icon" src={clientcall} />
{doctor.profession}
</p>
<p className="c-session_card_txt" id="c-session_date_p" >
<img className="c-session_card_icon" id="c-session_date" src={clientdate} />
{date}
</p>
<p className="c-session_card_txt" id="c-session_date_p" >
<img className="c-session_card_icon" id="c-session_date" src={clientdate} />
{doctor.sessionPrice}
</p>
</div>
<div className="c-session_card_bottom">
<button className="c-session_card_bottom_btn" id="c-session_profile_btn" onClick={() => { navigate('/doctorprofile', { state: { docId: doctor._id } }) }}>Profile</button>
<button className="c-session_card_bottom_btn" id="c-session_call_btn" onClick={() => navigate('/startsession', { state: { docId: doctor._id, roomName: doctorsArray.roomName } })}>
<FontAwesomeIcon
icon={faPhone}
id="c-session_call_btn_icon"
/>
Start Session
</button>
</div>
</div>
</Fragment >
)}
</Fragment >
);
}
export default CSessionFrag;
1 个解决方案
解决方案1
0 2022-07-19 15:26:06
When you start iterating from 0 you have to stop iterating before the length of the array当您从0开始迭代时，您必须在数组长度之前停止迭代
Swap this:交换这个：
for (var i = 0; i <= reserv.length; i++) {
With this:有了这个：
for (var i = 0; i < reserv.length; i++) {
You are getting an error, because reserv[1] is undefined .你得到一个错误，因为reserv[1]是undefined 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
通过对象数组进行映射在 Table 组件中不起作用 - Mapping through array of objects doesn't work in Table component
为什么这个js数组函数不起作用？ - Why doesn't this js array function work?
为什么我不能在 React JS 中的这个对象数组上 map？ - Why I cannot map over this array of objects in React JS?
使用对象数组时 Tiny Slider JS 不起作用 - Tiny Slider JS doesn't work when using Array of Objects
为什么jQuery.inArray不适用于对象数组 - Why jQuery.inArray doesn't work on array of objects
为什么映射“parseInt”无点样式不能按预期工作？ - Why doesn't mapping over `parseInt` point-free style work as expected?
React.js：为什么搜索过滤器不起作用？ - React.js: why search filter doesn't work?
为什么Twitter Typeahead不能与React js一起使用？ - Why Twitter Typeahead doesn't work with React js?
通过使用react-select映射对象数组来生成选项 - Generate options by mapping over array of objects with react-select
迭代对象数组并在反应中使用自定义键名映射它们 - Iterating over an array of objects and mapping them with custom key names in react
相关标签