TypeError: Cannot read property 'map' of undefined
[
[
{
"img" : "imgs/HeeYun/coffee.jpg",
"title" : "커피 1"
},
{
"img" : "imgs/HeeYun/coffee2.jpg",
"title" : "커피 2"
},
{
"img" : "imgs/HeeYun/coffee3.jpg",
"title" : "커피 3"
},
{
"img" : "imgs/HeeYun/coffee4.jpg",
"title" : "커피 4"
}
],
[
{
"img" : "imgs/HeeYun/blackCoffee.jpg",
"title" : "Black Coffee"
},
{
"img" : "imgs/HeeYun/coffee11.jpg",
"title" : "커피 11"
}
]
]上のコードは画像画像に関するmockデータです.
このmockデータは、大きな配列全体と内部の2つの配列から構成されています.
{imgData[0].map((el)=>{
return ( < ImgList coffeeImg={el.img} coffeeName = {el.title}/> );
})}💡 問題解決策 const [imgData, setImgData] = useState([]);
useEffect(() => {
fetch('http://localhost:3000/data/imgData.json', {
method: 'GET'
})
.then(res => res.json())
.then(data => {
setImgData(data);
});
},[])
const [imgData, setImgData] = useState([]);
useEffect(() => {
fetch('http://localhost:3000/data/imgData.json', {
method: 'GET'
})
.then(res => res.json())
.then(data => {
setImgData(data);
});
},[])userStateを使用してmock dataをロードし、setter関数を使用します.
setter関数は非同期で実行され、最初のimgData初期値の空の配列がロードされます.
すべての効果は、レンダリングがスクリーンにコミットされた後にのみ実行されます.
Reactがreturnでmap関数を繰り返し実行すると、初めてデータを入力しなかった場合でもレンダリングが実行されます.
まだ理解できない疑問
{imgData.map((el)=>{
return ( < ImgList coffeeImg={el.img} coffeeName = {el.title}/> );
})}上のコードは私が最初に実装したコードです.このとき一番上のmock dataのように2つの配列があるわけではなく、1つの配列しかなく、当時は動作がよかった.
imgDataとimgData[0]の違いはsetter関数が非同期であることである.
imgDataとimgData[0]のsetter関数が共に取得した最初のデータは、usStateのimgData stateである.
imgData.mapは最初からimgDataというmock dataを読み込むことができます.
ただしimgData[0]です.mapといえば、imgData mock dataを初めて読み込む場合、2つの配列が読み込まれている可能性があります.だからmap関数は何をするかを認識していないため発生した問題である.
最終設計のソリューション
データがまだ入力されていないか、すぐに処理できない場合は、&&方式を使用します.
フォーマットが{true&&expression}の場合、常に式が返されます.
{false&&expression}の場合、false値は常に存在し、無視してスキップします.
imgData[0]&&imgData[0].mapの場合、最初の試行ではimgData[0]に未定義のダミー値があるため、応答はスキップされます.
次の2回目の試みでは、setter関数がimgDataのstateを更新し、imgData Mock Dataが2つの配列に分かれた状態であることを確認した後、動作を実行してimgData[0]を識別し、true値を得る.式が開始されます.
結論:書く&&
Reference
この問題について(TypeError: Cannot read property 'map' of undefined), 我々は、より多くの情報をここで見つけました https://velog.io/@432421412/TypeError-Cannot-read-property-map-of-undefinedテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol