使用ReactJS和fetch-api无法访问和显示JSON

2024-04-29 • 问答

每个人都感谢您的帮助！

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

我正在使用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'));

之所以发生这种情况，是因为您的components / assetList.js试图访问assetList.assets.map上的assetList.assets，而未对其进行定义。

发出API请求并且尚未返回时，由于App.js上的assetList已初始化为空数组，因此尚未定义assetList上的资产。

您可以将{components / assetList.js}上的行替换为assetList.assets && assetList.assets.map(...)

在您的第一个渲染中，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: []
    }
};

和/或更改您的<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

why521jay 回答：使用ReactJS和fetch-api无法访问和显示JSON

大家都在问