問題是我有一個組件和一個里面有物件的陣列。我想從陣列中選擇一個隨機物件并渲染它。這是我已經擁有的代碼：
import React, { useEffect, useState } from 'react';
const DATA = [
{
key1: 'value1',
key2: ['string1', 'string2', 'string3']
},
{
key1: 'value2',
key2: ['string4', 'string5', 'string6']
},
{
key1: 'value3',
key2: ['string7', 'string8', 'string9']
}
];
const MyComponent = () => {
const [randomData, setRandomData] = useState({});
const getRandomObject = (array) => {
const randomObject = array[Math.floor(Math.random() * array.length)];
setRandomData(randomObject);
};
useEffect(() => {
getRandomObject(DATA);
}, []);
return (
<div>
<h2>{randomData.key1}</h2>
{randomData.key2.map((item) => (
<div>
<input type='checkbox' id={item} value={item} />
<label htmlFor={item}>{item}</label>
</div>
))}
</div>
);
}
export default MyComponent;
瀏覽器給我一個錯誤：
TypeError：無法讀取未定義的屬性（讀取“地圖”）
有誰知道出了什么問題？提前致謝
uj5u.com熱心網友回復：
您的useEffect回呼在初始渲染之后（而不是之前）運行。所以在第一次渲染randomData.key2時將是undefined，所以你不能呼叫.map()它。你有幾個選項來解決這個問題，但最合適的是useEffect()在你第一次呼叫時洗掉并將資料設定為隨機值useState()：
const getRandomObject = (array) => {
const randomObject = array[Math.floor(Math.random() * array.length)];
return randomObject;
};
const MyComponent = () => {
const [randomData, setRandomData] = useState(() => getRandomObject(DATA));
return (
...
);
}
請參閱下面的作業示例：
顯示代碼片段
const { useState } = React;
const DATA = [
{
key1: 'value1',
key2: ['string1', 'string2', 'string3']
},
{
key1: 'value2',
key2: ['string4', 'string5', 'string6']
},
{
key1: 'value3',
key2: ['string7', 'string8', 'string9']
}
];
const getRandomObject = (array) => {
const randomObject = array[Math.floor(Math.random() * array.length)];
return randomObject;
};
const MyComponent = () => {
const [randomData, setRandomData] = useState(() => getRandomObject(DATA));
return (
<div>
<h2>{randomData.key1}</h2>
{randomData.key2.map((item) => (
<div>
<input type='checkbox' id={item} value={item} />
<label htmlFor={item}>{item}</label>
</div>
))}
</div>
);
}
ReactDOM.render(<MyComponent />, document.body);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>如果您將函式傳遞給useState()，react 將在第一次呼叫時呼叫該函式useState()（而不是用于后續的重新渲染）并將狀態設定為回傳值，這將允許您將狀態設定為初始渲染的隨機值。
解決此問題的另一個選項是在使用之前檢查randomData.key2已定義.map()的內容。您可以通過在呼叫陣列之前檢查是否randomData.key2有值（即： is not ）來做到這一點。您可以使用可選鏈接來做到這一點：undefined.map()(?.)
randomData.key2?.map(...)
上面的檢查randomData不是undefined或null之前.map()在其上呼叫。您可以認為這種短路行為類似于以下代碼：
randomData.key2 && randomData.key2.map(...)
這也可行，并且在將可選鏈接引入語言之前通常使用。在所有這些選項中，我建議您使用第一個選項，但如果您發現需要使用useEffect()（例如：您有一些異步代碼獲取DATA），那么其他選項之一將更適合這種情況。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/453641.html
標籤：javascript 数组 反应 目的
上一篇：需要用一個ArrayList來存盤物件，賦值需要我用一個ArrayList，苦苦的從ArrayList中呼叫物件的方法