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

Question

感谢大家的帮助！

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

我正在使用 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?

我希望显示类似于下面的所需显示。

所需的显示。

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'));

Answer 1

发生这种情况是因为您的 components/assetList.js 试图访问 assetList.assets.map 上的 assetList.assets 而未定义它。

当API请求未返回时，由于App.js上的assetList初始化为空数组，assetList上的assets还没有定义。

您可以将 components/assetList.js 上的行替换为 assetList.assets && assetList.assets.map(...)，这样就可以了

Answer 2

在您的第一次渲染中，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 被初始化为一个数组...简而言之，您对自己期望的数据类型感到困惑。

要么更改您的初始状态以反映您希望它如何传递到 <AssetList>:

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

And/or 更改您的 <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>
  )
};

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

Trouble accessing and displaying JSON using ReactJS and the fetch-api

javascript

rest

typeerror

reactjs

fetch-api