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

【问题标题】：React is throwing a "Objects are not valid as a React child" error in browser log while using AxiosReact 在使用 Axios 时在浏览器日志中抛出“Objects are not valid as a React child”错误
【发布时间】：2021-01-04 12:14:42
【问题描述】：

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

Chrome 的控制台出现错误

Uncaught (in promise) 错误：对象作为 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": []
        }
    }
]

我一直在尝试使用的 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;

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

【问题讨论】：

标签： javascript reactjs

【解决方案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;

【讨论】：

cc: stackoverflow.com/q/66963028 我自己没有仔细研究过，但handler props 不在rerenderPropsList 中似乎有点奇怪？
@CertainPerformance 你这是什么意思？你能详细说明一下吗？或者在包中创建一个讨论，最好是长解释

【解决方案2】：

你不能这样渲染一个对象，如果你想渲染它只是为了调试，你可以使用JSON.stringify，如果你想真正渲染数据，你需要分别显示每个原始值。

【讨论】：