在我的react应用程序中,在页面加载时,我调用一个API并将该值存储在状态中.当我试图从状态创建JSX元素时,我得到了错误Cannot read properties of undefined (reading 'expire').

const [domains, setDomains] = useState([]);
const [records, setRecords] = useState({});

useEffect(() => {
        axios.get('zones/domains').then((res) => {
            setDomains(res.data)
            axios.get('zones/records', {
                params: {
                    l_id: res.data[0].l_id
                }
            }).then((res) => {
                setRecords(res.data)
            });
        });
        
    }, [])


let table_str = <tr>
    <td>SOA</td>
    <td>{records.added.expire}</td>
    <td>{records.added.value1} {records.added.value2}</td>
</tr>

推荐答案

在axios调用之前,您的状态为空.确保使用可选的更改进行如下更新.

let table_str = <tr>
    <td>SOA</td>
    <td>{records?.added?.expire}</td>
    <td>{records?.added?.value1} {records?.added?.value2}</td>
</tr>

Javascript相关问答推荐

Express.js:使用Passport.js实现基于角色的身份验证时出现太多重定向问题

如何在NightWatch.js测试中允许浏览器权限?

使用JavaScript在ionic Web应用程序中更新.pane和.view的背景 colored颜色

Vega中的模运算符

如何在RTK上设置轮询,每24小时

在JS中拖放:检测文件

我正在建立一个基于文本的游戏在react ,我是从JS转换.我怎样才能使变量变呢?

在WordPress中使用带有WPCode的Java代码片段时出现意外令牌错误

用JS从平面文件构建树形 struct 的JSON

更新动态数据中对象或数组中的所有值字符串

Use Location位置成员在HashRouter内为空

将Node.js包发布到GitHub包-错误ENEEDAUTH

如何在我的Next.js项目中.blob()我的图像文件?

在SuperBase JS客户端中寻址JSON数据

使用API调用的VUE 3键盘输入同步问题

我为什么要使用回调而不是等待?

通过解构/功能组件接收props-prop验证中缺少错误"

如何使用Reaction路由导航测试挂钩?

MUI迷你图:如何将$符号添加到MUI迷你图中的工具提示数据

如何在移动设备中使用JAVASSCRIPT移除点击时的焦点/悬停状态