TypeError:无法读取未定义的属性(正在读取“”0“”)

Question

即使在控制台中也是正常的，如果我删除了图像，其他信息会出现，但是当我添加图像时，它无法识别，我该如何解决这个问题

import React, { useEffect, useState } from 'react';
import './SinglePage.css';
import Style from '../../components/styles/Style';
import Logo from '../../components/Logo/Logo';
import Navbar from '../../components/Navbar/Navbar';
import RightBar from '../../components/RightBar/RightBar';
import {  useParams } from 'react-router';
import API from '../../api/Api';
import Loading from '../../components/loading/Loading';


const SinglePage = () => {
    const [loading , setLoading] = useState(true);
    const [Data , setData] = useState([]);
    const [message , setMessage] = useState();

    const id = useParams();
    const URL = 'http://localhost:8001/'

    useEffect(() => {
        API.get("api/GetPosts").then((res) => {
            if (res.data.AllData.length === 0) {
              setMessage(true);
            } else {
                const card= res.data.AllData.find(x => x._id === id.id)
              setData(card);
              setLoading(true);
            }
          });
        
    }, [])

    return (
        <>
            <div>
                <Logo />
                <Navbar />
                <div style={Style}>
                    <RightBar />
                    <div className="SinglePage-Container">
                        {loading && (
                            <div style={{margin:'0 auto', marginTop:'2rem' , display:'flex' , justifyContent:'center' , alignItems:'center'}}>
                                    <Loading/>
                                </div>
                        )}
                            {message ? (
                                <div style={{margin:'0 auto', marginTop:'2rem' , display:'flex' , justifyContent:'center' , alignItems:'center'}}>
                                    <h1>لا يوجد مقالة في هذا الرابط </h1>
                                </div>
                            ) : (
                                <>
                                <div className="SinglePage-Image">
                                    
                                <img src={`${URL}${Data.images[0].filename}`}  alt=''/>
                            </div>
                            <div className="SinglePage-Title">
                                {Data.title}
                            </div>
                            <p>
                                {Data.article}
                            </p>
                                </>
                            )}
                        
                        
                    </div>
                </div>
            </div>
        </>
    )
}

export default SinglePage

​

​

Answer 1

从注释中，我猜想你会从你的API中得到一个对象，并且你的Data的默认值是一个数组，这将是错误的。

为了确保只在从API中检索到图像后才渲染图像，您可以使用以下命令：

DATA.images && <img src={`${URL}${Data.images[0].filename}`} alt=''/>

现在一起来看：

import React, { useEffect, useState } from 'react';
import './SinglePage.css';
import Style from '../../components/styles/Style';
import Logo from '../../components/Logo/Logo';
import Navbar from '../../components/Navbar/Navbar';
import RightBar from '../../components/RightBar/RightBar';
import {  useParams } from 'react-router';
import API from '../../api/Api';
import Loading from '../../components/loading/Loading';


const SinglePage = () => {
    const [loading , setLoading] = useState(true);
    const [Data , setData] = useState({});
    //                                 ^-- CHANGE
    const [message , setMessage] = useState(false);
    //                                        ^-- CHANGE

    const id = useParams();
    const URL = 'http://localhost:8001/'

    useEffect(() => {
        API.get("api/GetPosts").then((res) => {
            if (res.data.AllData.length === 0) {
                setMessage(true);
            } else {
                const card= res.data.AllData.find(x => x._id === id.id)
                setData(card);
                setLoading(true);
            }
            });
        
    }, [])

    return (
        <>
            <div>
                <Logo />
                <Navbar />
                <div style={Style}>
                    <RightBar />
                    <div className="SinglePage-Container">
                        {loading && (
                            <div style={{margin:'0 auto', marginTop:'2rem' , display:'flex' , justifyContent:'center' , alignItems:'center'}}>
                                    <Loading/>
                                </div>
                        )}
                            {message ? (
                                <div style={{margin:'0 auto', marginTop:'2rem' , display:'flex' , justifyContent:'center' , alignItems:'center'}}>
                                    <h1>لا يوجد مقالة في هذا الرابط </h1>
                                </div>
                            ) : (
                                <>
                                <div className="SinglePage-Image">
                                    
                                {
                                    DATA.images && <img src={`${URL}${Data.images[0].filename}`} alt=''/>
                                }
                                {/*  ^--- CHANGE */}
                            </div>
                            <div className="SinglePage-Title">
                                {Data.title}
                            </div>
                            <p>
                                {Data.article}
                            </p>
                                </>
                            )}
                        
                        
                    </div>
                </div>
            </div>
        </>
    )
}

export default SinglePage