React axios 通过对象唯一名称从 JSON 获取数据

Question

我有这样的结构：

{
    "RESTAPI": {
        "uniqueId": {
            "id": "1",
            "data_2": "data_2",
            "data_3": true,
            "mg_gateway": "Another Object"
        }, 
        "uniqueId2": {
            "id": "1",
            "data_2": "data_2",
            "data_3": true,
            "mg_gateway": "Another Object"
        }
    }
}

uniqueId可以包含字母和数字。 我试图得到它：

componentDidMount() {
    axios.get('https:LINKNAME/RESTAPI.json')
        .then(res => {
            const fetched = res.data;
            this.setState({ data: fetched });
        })
}

并在 JSX 中显示：

{Object.keys(this.state.data).map((obj, i) => {
    return <p key={i}>{obj}</p>
})}

在浏览器中，我只能看到字符串 (typeof string)： uniqueId和uniqueId2但在控制台日志中我得到了所有对象。 控制台日志

但是我无法在地图中的每个嵌套对象中显示数据。 所以我尝试使用obj.data_2并得到undefined 。 我以为我可以在里面创建新的 obj.map ，但是 obj 总是字符串所以这是不可能的。 请帮我

Answer 1

Object.keys只给你对象的键，这就是为什么你只看到键(uniqueId,uniqueId2) 所以如果你想要整个数据和this.state.data.map(...your code);做this.state.data.map(...your code); 但我怀疑你可能会得到类似[object]东西，所以在 map 函数中使用JSON.stringify 。 或者你可以简单地替换<p key={i}> {this.state.data[obj]}</p>

Answer 2

您可以使用Object.values而不是Object.keys ，那么obj将是：

{
  "id": "1",
  "data_2": "data_2",
  "data_3": true,
  "mg_gateway": "Another Object"
}

或者你可以像以前的回复那样做this.state.data[key]

{Object.keys(this.state.data).map((key, i) => {
    return <p key={i}>{this.state.data[key]}</p>
})}