我正在使用 axios 呼叫 api 以在點擊按鈕時檢索圖片。我遇到的問題是當我使用 photos.forEach 時出現錯誤，說 forEach 不是一個函式。當前使用 for 回圈它只顯示第一個結果。當我 console.log 陣列充滿照片時，我只是難以訪問它們！我確定這很簡單，我目前正在學習 js 和 react，需要一些指導。謝謝！
function Facebook() {
const [photos, setPhotos] = useState('');
const getData = () => {
axios
.request(options)
.then(function (response) {
const data = response.data.photos.data;
setPhotos(
data.map((image) => {
return image.picture;
}),
);
})
.catch(function (error) {
console.error(error);
});
};
//console.log(photos.length);
//console.table(photos);
const photoList = () => {
for (let i = 0; i < photos.length; i ) {
console.table(photos);
return <img className='img image-full' src={photos[i]} />;
}
};
return (
<div>
<button
onClick={getData}
className='inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-500 rounded-md cursor-pointer hover:bg-indigo-600'>
Tailwind Button
</button>
<div className='flex flex-row mx-auto'>
<ul>
<li>{photoList()}</li>
</ul>
</div>
</div>
);
}
export default Facebook;照片陣列的 Console.log
uj5u.com熱心網友回復：
您可以使用空陣列初始化照片，也可以不定義它并在稍后訪問它時檢查它是否已設定。我寧愿只使用一個空陣列：
function Facebook() {
const [photos, setPhotos] = useState([]);
...
順便說一句，您也可以使用 map 來獲取 JSX 中的照片并省略 photoList 功能，但這只是一個意見問題：
return (
<div>
<button
onClick={getData}
className='inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-500 rounded-md cursor-pointer hover:bg-indigo-600'>
Tailwind Button
</button>
<div className='flex flex-row mx-auto'>
<ul>
<li>
{photos.map((elem) => {
return <img className='img image-full' src={elem} />;
})}
</li>
</ul>
</div>
</div>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/398800.html
標籤：javascript 反应 Facebook
上一篇：NavigationView推送aNavigationLink問題
下一篇：將索引重新排序為特定順序