如何存储和迭代对象数组
2021-05-26
75
我无法从对象访问该字段，因为它会引发以下错误：
TypeError: Cannot read property 'medicineId' of undefined when i try the peice of code below,
{medlist &&
medlist.map(({medicineId, medicineName }) => (
<li key={medicineId} >
<h1>{medicineName}</h1>
</li>
))
}
它给了我 index.js:1 警告：列表中的每个子项都应具有唯一的“key”属性。 即使 key 是唯一的。但我不知道它给了我这个唯一的 key 属性，因为它是字符串类型。
请注意，
medicineId
是字符串类型。我尝试通过将这段代码更改为来解决这个问题，
{medlist &&
medlist.map((med,idx) => (
<li key={idx} >
<h1>{med.medicineName}</h1>
</li>
))
}
现在我没有收到唯一键的警告，但没有显示标签 med.medicineName 。 当我尝试 {console.log(med.medicineName)} 它是 未定义
const fetchMedicineList = () =>{
return axios.get('http://localhost:8080/medicine')
.then(({data})=>{
console.log(data[0].medicineName)//this prints the medicine name.
return data;
})
.catch(err =>{
console.error(err)
});
}
but when i tried to store the object array inside usestate,
const [medlist, setMedlist] = useState([])or**useState([{}])**
useEffect(() => {
fetchMedicineList().then(medicineList=>{
setMedlist([...medlist,medicineList]);
})
}, [medlist])
and i cant print or access medlist[0].medicineName ,it says **undefine** what am i doing wrong here, thanks.
2个回答
这只是检查数组是否存在。所以这始终是真的。
[] ? true: false; //true always
因此，您必须像这样检查它的长度
[].length ? true: false // false
因此请使用这个
{medlist.length &&
medlist.map(({medicineId, medicineName }) => (
<li key={medicineId} >
<h1>{medicineName}</h1>
</li>
))
}
Omkar Kulkarni
2021-05-26
您可以在 setMedlist useState 中设置不带扩展操作的 API 响应。
检查这个
const initailValue =[];
const apiResponse =[{
'medicineName':'abc'
}]
const neWArr = [...initailValue,...apiResponse]
console.log(neWArr[0].medicineName)
对于您的问题，请尝试这个，
const [medlist, setMedlist] = useState([])
useEffect(() => {
fetchMedicineList().then(medicineList=>{
setMedlist([...medlist,...medicineList]);
})
}, [medlist])
HG.R Sanjayamal
2021-05-26