React.js-TypeError：无法读取未定义的属性“ item”

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）时，必须在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 : []