gpt4 book ai didi

javascript - 使用 ReactJS 和 fetch-api 访问和显示 JSON 时遇到问题

转载 作者:行者123 更新时间:2023-11-30 13:46:41 26 4
gpt4 key购买 nike

谢谢大家的帮助!

我看过几个类似的问题,但无法推断出他们的答案来解决我的问题。

我正在使用 ReactJS 应用程序从网站使用 JSON。我正在使用 https://pusher.com/tutorials/consume-restful-api-react 中的代码并根据我的情况进行更改。

Currently, when I view index.js, I get the error "TypeError: assetList.assets is undefined." Given the the JSON and code below, what do I need to change to display a list of the assets and their properties?

我希望显示器看起来像下面的 Desired Display。

所需的显示。

There are two 2 assets:<br/>
id: 1317 Filename: PROCESS_FLOW.pdf
id: 1836 Filename: 004527_FS.jpg



从网站消费的 JSON

{"totalNumberOfAssets":2,
"assets":[
{"id":"1317","attributes":{"Filename":["PROCESS_FLOW.pdf"]}},
{"id":"1836","attributes":{"Filename":["004527_FS.jpg"]}}
]}



组件/assetList.js

import React from 'react'

const AssetList = ({assetList}) => {
return (
<div>
There are {assetList.totalNumberOfAssets} assets:
{assetList.assets.map((asset) => (
<div>
id: {asset.id} filename: {asset.filename}
</div>
))}
</div>
)
};

export default AssetList



App.js

import React, {Component} from 'react';
import AssetList from './components/assetList';

class App extends Component {
render() {
return (
<AssetList assetList={this.state.assetList} />
)
}

state = {
assetList: []
};

componentDidMount() {
fetch('http://ligitaddress/api/v1/asset')
.then(res => res.json())
.then((data) => {
this.setState({ assetList: data })
})
.catch(console.log)
}
}

export default App;



索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

最佳答案

在您的第一次渲染中,this.state.assetList 的值是一个数组:

state = {
assetList: []
};

无论您将其传递给 <AssetList>

const AssetList = ({assetList}) => {
return (
<div>
There are {assetList.totalNumberOfAssets} assets:
{assetList.assets.map((asset) => (
<div>
id: {asset.id} filename: {asset.filename}
</div>
))}
</div>
)
};

这行说 assetList.assets.map正在尝试调用 map()在未定义的东西上。 (您可以访问数组上的属性 assets,它将是 undefined )它似乎期望 assetList成为一个 assets 的对象数组在其中,但在您的父组件中 assetList被初始化为一个数组...简而言之,您对自己期望的数据类型感到困惑。

要么更改您的初始状态以反射(reflect)您期望它如何传递到 <AssetList> :

state = {
assetList: {
assets: []
}
};

和/或更改您的 <AssetList>组件以正确检查其属性:

const AssetList = ({assetList}) => {
return (
<div>
There are {assetList.totalNumberOfAssets} assets:
{Array.isArray(assetList.assets) && assetList.assets.map((asset) => (
<div>
id: {asset.id} filename: {asset.filename}
</div>
))}
</div>
)
};

关于javascript - 使用 ReactJS 和 fetch-api 访问和显示 JSON 时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59183541/

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