Reactjs - TypeError：无法读取未定义的属性“项目”

Question

我在使用来自 API 的 JSON 的特定项目的信息时遇到问题。

当想要放置我需要的字段时，它会抛出错误：

TypeError: Cannot read property 'item' of undefined -.

当我想将字段放入其中时会发生这种情况

return (
*value*
).

但如果我把它从退货中取出并在控制台中显示它就可以了。

import React, { useState, useEffect } from 'react';

function Platillos_Detalle({ match }) {

    useEffect(() => {
        fetchItem();
    }, []);

    const [items, setItem] = useState({
        item: {}
    });

    const fetchItem = async () => {
        const fetchItem = await fetch(
            `https://fortnite-api.theapinetwork.com/item/get?id=${match.params.id
            }`
        );
        const items = await fetchItem.json();
        setItem(items);
        console.log(items.data.item.description)
    }

    return (
        <div className="container">
                <div>{items.data.item.description}</div>
    
        </div>


    )
}
export default Platillos_Detalle;

console.log (items.data.item.description)的结果

我还想提一下，相同的代码用于执行类似的操作，但包含多个项目，并且可以正常工作。

更新 1：

关注“React Hooks useEffect”警告。 当我使用从另一个页面发送的参数（特定项目的 id）时，我必须在：[]of useEffect 中定义它。这解决了警告，现在如果它从 JSON 接收数据。 其他问题是由于 JSON 结构如下所示：

JSON 示例

data: {
    itemID: "iditem",
    item: {
        name: "nombre",
        imagen: {
                inforamtion:"url"
        }
    }
}

所以在 useState 里面添加我需要的属性（如果我没有这样做，它会标记错误 “未定义的项目”）并以此解决错误

function Platillos_Detalle({ match }) {

    useEffect(() => {
        fetchItem();
    }, [
        match.params.id
    ]);

    const fetchItem = async () => {
        const fetchItem = await fetch(
            `https://fortnite-api.theapinetwork.com/item/get?id=${match.params.id
            }`
        );
        const item = await fetchItem.json();
        setItem(item.data)
    };
    const [item, setItem] = useState({
        item: {
            images: {

            }
        }
    });
    return (
        <div className="center-block">
            <br />
            <div className="col-md-4 offset-md-4" >
                <div className="card">
                    <img src={item.item.images.information} className="card-img-top" alt="..." />
                    <div className="card-body">
                        <h5 className="card-title">{item.item.name} </h5>
                        <p className="card-text">{item.item.description}</p>
                    </div>
                    <div className="card-footer ">
                        <button className="btn btn-primary btn-lg btn-block">Pedir :v</button>
                    </div>
                </div>
                <br></br>
            </div>
        </div>
    )
}
export default Platillos_Detalle;

Answer 1

它可能还没有准备好，因为它是异步代码的结果。也许尝试添加一个条件检查它是否存在。

Items.data ? Items .data.anything : []