Question

未捕获的类型错误：无法读取 Simple React 项目中未定义的属性（读取‘0’）

2022-12-09

732

javascript reactjs

尝试学习 React 并编写这个简单的照片应用程序。问题如下：

Collection.jsx:6 Uncaught TypeError: Cannot read properties of undefined (reading '0')

那么为什么会发生这种情况？当我不在 div className="content 部分中映射 Collection 元素时，一切正常。问题的关键在哪里？

我的 Collection 元素：


export const Collection = ({ images, name }) => {
    return (
        <div className="collection">
            <img className="collection__big" src={images[0]} alt="Item" />
            <div className="collection__bottom">
                <img className="collection__mini" src={images[1]} alt="Item" />
                <img className="collection__mini" src={images[2]} alt="Item" />
                <img className="collection__mini" src={images[3]} alt="Item" />
            </div>
            <h4>{name}</h4>
        </div>
    );
};

我的 App 元素：

import React from 'react';
import { Collection } from './Collection';
function App() {
    const [collections, setCollections] = React.useState([]);
    React.useEffect(() => {
        fetch('https://6391dc7eac688bbe4c54d694.mockapi.io/photo_collection')
            .then((res) => res.json())
            .then((json) => {
                setCollections(json);
            })
            .catch((err) => {
              console.warn(err);
              alert('Дані неможливо завантажити')
            });
    }, []);
    return (
        <div className="App">
            <h1>Моя колекція фотографій</h1>
            <div className="top">
                <ul className="tags">
                    <li className="active">Загальні</li>
                    <li>Гори</li>
                    <li>Море</li>
                    <li>Архітектура</li>
                    <li>Міста</li>
                </ul>
                <input className="search-input" placeholder="Пошук по назві" />
            </div>
        <div className="content">{
          collections.map((obj) => (
            <Collection
              name={obj.name}
              images={obj.photos}
            />
          ))
        }
        </div>
            <ul className="pagination">
                <li>1</li>
                <li className="active">2</li>
                <li>3</li>
            </ul>
        </div>
    );
}
export default App;

Answer 1

您的 API 发送集合内的第一个元素不是直接的，这是您更新的 App.js

import React from 'react';
import { Collection } from './Collection';
function App() {
    const [collections, setCollections] = React.useState([]);
    React.useEffect(() => {
        fetch('https://6391dc7eac688bbe4c54d694.mockapi.io/photo_collection')
            .then((res) => res.json())
            .then((json) => {
              console.log(json);
                setCollections(json[0].collections);
            })
            .catch((err) => {
              console.warn(err);
              alert('Дані неможливо завантажити')
            });
    }, []);
    return (
        <div className="App">
            <h1>Моя колекція фотографій</h1>
            <div className="top">
                <ul className="tags">
                    <li className="active">Загальні</li>
                    <li>Гори</li>
                    <li>Море</li>
                    <li>Архітектура</li>
                    <li>Міста</li>
                </ul>
                <input className="search-input" placeholder="Пошук по назві" />
            </div>
        <div className="content">{
          collections.map((obj) => (
            <Collection
              name={obj.name}
              images={obj.photos}
            />
          ))
        }
        </div>
            <ul className="pagination">
                <li>1</li>
                <li className="active">2</li>
                <li>3</li>
            </ul>
        </div>
    );
}
export default App;