gpt4 book ai didi

javascript - 如何从 react 组件访问数组中的数组?

转载 作者:搜寻专家 更新时间:2023-11-01 00:48:09 25 4
gpt4 key购买 nike

我有这个数组:

{
"firstname": "Jessica",
"lastname": "Wood",
"favorite": {
"movie": Flint Town,
"drink": Sprite
}
}

我想喝点酒,但我发现对象无效,因为发现 React 子对象:带键的对象。

我该如何解决?

我的 react 组件:

import React, { Component } from 'react';
import axios from 'axios';

class Home extends Component {

state = {
info: []
}

componentDidMount() {
axios.get('http://localhost:9000/api')
.then(res => {
const info = res.data;
this.setState({ info });
})
}

render() {
return (
<ul>
<li>{this.state.info.favorite.drink}</li>
</ul>
)
}
}
export default Home;

最佳答案

您需要解析“收藏夹”对象中的值,以便将它们呈现为字符串。

看起来您还试图访问 this.state.info 中存在的 Prop 。这就是为什么它给你未定义的错误。 render 方法在您将任何内容分配给 info 之前运行,这是您在 componentDidMount() 中所做的。

为了解决这个问题,我们可以使用加载状态值来确定要显示的内容。加载状态将在您的 componentDidMount() 逻辑完成后切换,确保您的状态已填充。

这是沙箱:https://codesandbox.io/s/bold-germain-k3f23

class Home extends Component {
state = {
info: {},
loading: true
};

componentDidMount() {
axios.get("http://localhost:9000//").then(res => {
const info = res.data;
const parsedInfo = {
...info,
favorite: Object.entries(info.favorite).reduce((obj, [k, v]) => {
obj[k] = "" + v;
return obj;
}, {})
};

this.setState({ info: parsedInfo, loading: false });
});
}

render() {
const { loading, info } = this.state;
if (loading) {
return <div>Loading</div>;
} else {
return (
<div>
<div>{info.favorite.movie}</div>
<div>{info.favorite.drink}</div>
</div>
);
}
}
}

关于javascript - 如何从 react 组件访问数组中的数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56203822/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com