React 在使用 Axios 时在浏览器日志中抛出“Objects are not valid as a React child”错误

Question

我对 React 完全陌生。 我正在尝试显示来自我的 Web API 的数据。

我在 Chrome 的控制台中遇到错误

未捕获（承诺中）错误：对象作为 React 子对象无效（发现：object 带有键 {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": []
        }
    }
]

我一直在尝试使用的 React 代码是：

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;

关于如何让我的数据显示的任何想法？

Answer 1

那样做

我只是显示您的 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;

Answer 2

您不能以这种方式渲染 object，如果您只想渲染它以进行调试，则可以使用JSON.stringify ，如果要实际渲染数据，则需要分别显示每个原始值。