我在使用 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）时，我必须在 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;