JS & React- forEach 和 For Loop 只给出一个结果，当我 console.log 数组时，它显示多个项目 avaialbe

Question

我正在使用 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 for photosArray

Answer 1

您可以使用空数组初始化照片，也可以将其保留为未定义状态，并在稍后访问时检查它是否已设置。不过，我宁愿只使用一个空数组：

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>
);

JS & React- forEach 和 For Loop 只给出一个结果，当我 console.log 数组时，它显示多个项目 avaialbe

JS & React- forEach and For Loop only giving one result, when I console.log the array, it shows multiple items avaialbe

javascript

facebook

reactjs