Javascript ReactJS:TypeError:无法读取属性'；项目'；未定义的

我在做一些小运动时遇到了麻烦

我有一个文件“itemdail.js”，在其中我定义了一个Componenet“itemdail”，它由来自另一个组件的路由调用，比如：

。 这是我的代码：

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

function ItemDetail({ match }) {

    const [item, setItem] = useState({});
    console.log(match);

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

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


    return (
      <div>
          <h3>Item: {item.data.item.name}</h3>
      </div>
  );
}

export default ItemDetail;

import React，{useState，useffect}来自“React”；
函数ItemDetail（{match}）{
const[item，setItem]=useState（{}）；
控制台日志（匹配）；
useffect（（）=>{
fetchItem（）；
}, []);
const fetchItem=async（）=>{
const data=等待获取(`https://fortnite-api.theapinetwork.com/item/get?id=${match.params.id}`）；
const item=wait data.json（）；
设置项目（项目）；
控制台日志（项目）；
}
返回(
项：{Item.data.Item.name}
);
}
导出默认项目详细信息；

路径的id是API调用所需的id（通过match.params.id）

fetchItem（）方法将我需要的数据提取为JSON，然后将其保存在状态项中，然后呈现我的呈现内容。但它抛出了一个错误：“TypeError:无法读取未定义的属性'item'，在我从JSX访问

item.data.name

的行中

---

奇怪的是：当我将

Item:{Item.data.Item.name}

更改为

Item:{Item.data.Item.name}

时，它工作了，就这一次，当我再次刷新或浏览我的站点到这个路径时，它会再次抛出这个错误

你需要控制它，因为在你得到这个项目之前，react会呈现它。您可以这样编辑： 因此，它将检查您何时获得项目，它将呈现页面

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

function ItemDetail({ match }) {

    const [item, setItem] = useState({});
    console.log(match);

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

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


    return (
      <div>
         <h3>Item: {item && item.data && item.data.item ? item.data.item.name : "Loading..."}</h3>
      </div>
  );
}

export default ItemDetail;

import React，{useState，useffect}来自“React”；
函数ItemDetail（{match}）{
const[item，setItem]=useState（{}）；
控制台日志（匹配）；
useffect（（）=>{
fetchItem（）；
}, []);
const fetchItem=async（）=>{
const data=等待获取(`https://fortnite-api.theapinetwork.com/item/get?id=${match.params.id}`）；
const item=wait data.json（）；
设置项目（项目）；
控制台日志（项目）；
}
返回(
项：{Item&&Item.data&&Item.data.Item？Item.data.Item.name:“正在加载…”
);
}
导出默认项目详细信息；

您还可以为短解决方案使用可选链接：

---

Item:{Item？.data？.Item？Item.data.Item.name:“加载…”
在初始渲染时，
Item
仅设置为
{}
，这意味着尝试访问
Item.data。Item
将爆炸（您将尝试在
未定义的
上访问
Item
）。避免这种情况的一种常见模式是在从
fetch
调用加载时显示某些内容：
Item:{Item.data？Item.data.Item.name:“加载…”
Ohh，这是因为返回的代码是在fetchItem（）之前执行的？谢谢这对我有用是的，
fetch
是异步进行的，所以在fetch返回并设置状态之前肯定会发生渲染。是的，我忘了，你是对的。我正在编辑代码。我还添加了item和item.data和item.data.item检查，所以这将是最好的检查，不是吗？是的。实际上，另一个简单得多的选项是，如果可选链接可用，只需执行以下操作：
item？.data？.item？.name | |“加载…”
我知道可能不可用，所以我添加了一个解决方案。但这是可能的。