Javascript React是抛出一个；对象作为React子对象无效；使用Axios时浏览器日志出错

我完全没有反应能力。我正在尝试显示来自Web API的数据

我在Chrome的控制台中收到一个错误

未捕获（承诺中）错误：对象作为React子对象无效（找到：具有键{nameId，modelName，tblModelDetails}的对象）。如果要呈现子对象集合，请改用数组

我认为错误是因为我的JSON中有一个嵌套数组。我试图在浏览器上的列表中显示数据

以下是我的Json在Postman中的显示方式：

[
    {
        "modelId": 18,
        "typeId": 2,
        "rangeId": 1,
        "nameId": 1,
        "scaleId": 1,
        "info": "info",
        "picture": "Picture",
        "partNumber": 123,
        "amountOwned": 3,
        "modified": false,
        "limitedAddition": true,
        "datePurchase": "2021-01-01T00:00:00",
        "pricePaid": 10.0000,
        "upc": 99999,
        "modelSeries": null,
        "name": {
            "nameId": 1,
            "modelName": "Xerion",
            "tblModelDetails": []
        },
        "range": {
            "rangeId": 1,
            "modelRange": "Class",
            "tblModelDetails": []
        },
        "scale": {
            "scaleId": 1,
            "modelScale": "1:32",
            "tblModelDetails": []
        },
        "type": {
            "typeId": 2,
            "modelType": "Tractor",
            "tblModelDetails": []
        }
    }
]

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

class App extends Component {
  state = {
    values: []
  }
  componentDidMount(){
    
    axios.get('https://localhost:5001/api/Model')
      .then((response) => {
        console.log(response)
        this.setState({
          values: response.data
        })
      })
    }

  render(){
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <ul>
            {this.state.values.map((values: any) => (
              
              <li>{values[0]}</li>
              

            ))}
          </ul>
        </header>
      </div>
    );
  }
  }


export default App;

我尝试使用的React代码是：

[
    {
        "modelId": 18,
        "typeId": 2,
        "rangeId": 1,
        "nameId": 1,
        "scaleId": 1,
        "info": "info",
        "picture": "Picture",
        "partNumber": 123,
        "amountOwned": 3,
        "modified": false,
        "limitedAddition": true,
        "datePurchase": "2021-01-01T00:00:00",
        "pricePaid": 10.0000,
        "upc": 99999,
        "modelSeries": null,
        "name": {
            "nameId": 1,
            "modelName": "Xerion",
            "tblModelDetails": []
        },
        "range": {
            "rangeId": 1,
            "modelRange": "Class",
            "tblModelDetails": []
        },
        "scale": {
            "scaleId": 1,
            "modelScale": "1:32",
            "tblModelDetails": []
        },
        "type": {
            "typeId": 2,
            "modelType": "Tractor",
            "tblModelDetails": []
        }
    }
]

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

class App extends Component {
  state = {
    values: []
  }
  componentDidMount(){
    
    axios.get('https://localhost:5001/api/Model')
      .then((response) => {
        console.log(response)
        this.setState({
          values: response.data
        })
      })
    }

  render(){
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <ul>
            {this.state.values.map((values: any) => (
              
              <li>{values[0]}</li>
              

            ))}
          </ul>
        </header>
      </div>
    );
  }
  }


export default App;

从“React”导入React，{Component}；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“axios”导入axios；
类应用程序扩展组件{
状态={
值：[]
}
componentDidMount（）{
axios.get（）https://localhost:5001/api/Model')
。然后（（响应）=>{
console.log（响应）
这是我的国家({
值：response.data
})
})
}
render（）{
返回(

{this.state.values.map（（值：any）=>(
{值[0]}
))}

);
}
}
导出默认应用程序；

---

关于如何显示我的数据有什么想法吗？

你不能以这种方式渲染对象，如果你想渲染它只是为了调试，你可以使用

JSON.stringify

，如果你想实际渲染数据，你需要分别显示每个原语值。

这样做

我只是显示json中的

pricePaid

值

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';

class App extends Component {
  state = {
    values: []
  }

  componentDidMount(){
    axios.get('https://localhost:5001/api/Model')
      .then((response) => {
        console.log(response)
        this.setState({
          values: response.data
        })
      })
    }

  render(){
    if (!this.state.values.length) {
        return null;
    }

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <ul>
            {this.state.values.map((value: any) => (
              
              <li>{value.pricePaid}</li>
              

            ))}
          </ul>
        </header>
      </div>
    );
  }
}


export default App;

从“React”导入React，{Component}；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“axios”导入axios；
类应用程序扩展组件{
状态={
值：[]
}
componentDidMount（）{
axios.get（）https://localhost:5001/api/Model')
。然后（（响应）=>{
console.log（响应）
这是我的国家({
值：response.data
})
})
}
render（）{
if（！this.state.values.length）{
返回null；
}
返回(

{this.state.values.map（（值：any）=>(
{value.pricepayed}
))}

);
}
}
导出默认应用程序；

cc：我自己也没怎么研究过，但似乎有点奇怪，

rerenderPropsList

？@CertainPerformance这是什么意思？你能详细说明一下吗？或者在软件包中创建一个讨论，如果它有很长的解释就更好了