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 ，如果要實際渲染數據，則需要分別顯示每個原始值。