每个人都感谢您的帮助!
我看过几个类似的问题,但无法推断出他们的答案来解决我的问题。
我正在使用ReactJS应用程序从网站使用JSON。我正在使用https://pusher.com/tutorials/consume-restful-api-react中的代码,并对其进行更改以适合我的情况。
[当前,当我查看index.js时,出现错误“ TypeError:未定义assetList.assets。”鉴于以下JSON和代码,我需要更改为显示资产及其属性的列表?
我希望类似显示器的外观看起来像下面的所需显示器。
所需的显示。
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"]}}
]}
components / 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;
index.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'));
之所以发生这种情况,是因为您的component / assetList.js试图在未定义的情况下访问assetList.assets.map上的assetList.assets。
当发出API请求且尚未返回时,由于App.js上的assetList已初始化为空数组,因此尚未定义assetList上的资产。
您可以用assetList.assets && assetList.assets.map(...)
替换components / assetList.js上的行,并且应该这样做