主页 / 问题 / 1254508
Accepted
Voprositel
Asked:2022-03-11 21:27:43 +0000 UTC2022-03-11 21:27:43 +0000 UTC

如何在获取对象之前不读取它的属性

  • 772

有一个反应组件：

import React, { useState, useEffect } from 'react';
import { useHttp } from '../../hooks/http.hooks';

function Main() {
    const { loading, error, request } = useHttp(); // Для запросов
    const [news, setNews] = useState([]);

    useEffect(async() => {
        takeNews(4)
    }, []);

    async function takeNews(quantity = 5) {
        const data = await request(`http://localhost:5500/api/news/top/${quantity}`); // Получаю массив из 4 объектов
        if (Array.isArray(data.news)) {
            setNews(data.news);
        }
    }

    return (
        <>
            {news[0].content.headline}
        </>
    );
}

export default Main;

第一次渲染news[0].content.headline会报错：

无法从 读取属性undefined。

你怎么能避免它呢？我想出的唯一解决方案是打包news成子对象，然后对它们做同样的事情，但是这样代码会有很多不合理的变量，而且会很丑。

javascript

2 个回答

  1. Best Answer

    您可以通过多种方式执行此操作（假设此变量在您的自定义中更改）：

    if (loading) return <div>Loading...</div>
return (
    <>
       {news[0].content.headline}
    </>
);

    例如，您可以使用get函数lodash

    return (
        <>
            {get(news, "[0].content.headline", "No Data")}
            
        </>
    );

    您可以检查数组的长度：

    if (news.length === 0) return "No Data";
return (
        <>
            {news[0].content.headline}
            
        </>
    );
    • 2

  2. 您还可以使用可选运算符：

    const obj = {}

console.log(obj?.a?.b) // undefined
console.log(obj.a.b) // error

    虽然对运算符的支持不是很好，并且在某些浏览器中可能会出现 SyntaxError，因此通过以下方式进行比较&&：

    const obj = {}

console.log(obj.a && obj.a.b) // undefined

    • 0

相关问题