Javascript 无法访问嵌套对象'；使用React useState在渲染函数中创建数据

我想在页面上显示

用户

对象的数据。起初，我有 使用

useState

将

cats

值设置为空数组 你可以看到下面

useEffect(() => {
             fetchItems();
         }, []);
     
         const [cats, setcats] = useState([]);
     
         const fetchItems = async () => {
             const data = await fetch("https://cat-fact.herokuapp.com/facts/");
             const cats = await data.json();
             setcats(cats.all);
     };

下面是我的渲染函数

    <div>
        <h1>Shop Page</h1>
        <hr />
    
        {cats.map((cat) => (
            <div key={cat._id}>
                <strong>Id: </strong>{" "}
                <Link to={`/Shop/${cat._id}`} style={linkstyle}>
                    {cat._id}
                </Link>
                <br />
                <strong>Text: </strong> {cat.text}
                <br />
                <strong>Upvotes: </strong> {cat.upvotes}
                <strong>UserName: </strong>
                {cat.user.name.first}
                {/* Above line is not working */}
                <p>{JSON.stringify(cat.user)}</p>
                {/* Above line actually prints the complete data in a cat objects's data including first name and last name */}
                <hr />
            </div>
        ))}
    </div>

我无法理解我犯的错误或我的观点是什么 俯瞰。请帮我做这个

提前谢谢

附件是一些供参考的屏幕截图

[1] ：[2]： [3]:

编辑

---

我从社区给出的答案中找到了解决办法。我的代码是正确的，但其中一个响应中似乎缺少

用户

对象，我没有注意到，也没有过滤掉导致此错误的错误响应。

来自

的响应https://cat-fact.herokuapp.com/facts/

包括一个缺少

用户属性的
cat

{
  _id: "58e008450aac31001185ecfd", 
  text: "A cat was mayor of Talkeetna, Alaska, for 20 years…His name is Stubbs, and he died on July 23, 2017.", 
  type: "cat", 
  upvotes: 1, 
  userUpvoted: null
}


修复数据或过滤数据：

setcats(cats.all.filter(c => c.user));

用户属性不存在此Id:58e008450aac31001185ecfd

您可以尝试以下方法：
{cat.user&&cat.user.name.first}
您的代码基本正常，只是数百个响应对象中至少有一个缺少
user
属性，因此您需要使用防护或可选链接。
{
  _id: "58e008450aac31001185ecfd", 
  text: "A cat was mayor of Talkeetna, Alaska, for 20 years…His name is Stubbs, and he died on July 23, 2017.", 
  type: "cat", 
  upvotes: 1, 
  userUpvoted: null
}


setcats(cats.all.filter(c => c.user));