如何在 React 的 API 中渲染嵌套在对象中的数组中的数据？

Posted 2023-02-22

【中文标题】如何在 React 的 API 中渲染嵌套在对象中的数组中的数据？

【英文标题】：How can I render data from array nested in object from API in React?

【发布时间】：2019-08-21 06:06:43

【问题描述】：

我正在尝试从http://www.colr.org/json/color/random 呈现数据。

我使用 axios 从 API 获取数据。 当我收到数据时，我无法通过地图渲染它（因为它显然是对象内部的一个数组），所以它会抛出错误： TypeError：this.props.colors.map 不是函数。 我需要使用 JSON.parse() 还是我能做什么？

//App.js

import React,  Component  from 'react';
import logo from './logo.svg';
import Color from './components/Color';
import './App.css';
import axios from 'axios';

class App extends Component 
  state = 
    colors: []
  ;

componentDidMount() 
  axios.get('http://www.colr.org/json/colors/random/2')
  .then(res => this.setState(
    colors: res.data ))


  render() 
    console.log(this.state.colors);
    return (
      <div className="App">
        <header className="App-header">
          <img src=logo className="App-logo"  />
          <Color 
            colors=this.state.colors
          />
        </header>
      </div>
    );
  

export default App;

---

//颜色分量：

import React,  Component  from 'react';


 class Color extends Component 

  render() 
       return this.props.colors.map((color) => (
        <h1
          key=color.id
        >
          Colorcolor.id: color.hex
        </h1>
      ))
  


export default Color;

【问题讨论】：

this.state.colors 在控制台打印了什么？ this.state.colors.colors.map 不工作吗？

响应对象长什么样子

【参考方案1】：

您可以使用 JSON.stringify 它将其转换为字符串，或者您可以使用它对我有用的 util 库，我昨天处理了同样的问题

【讨论】：

对示例进行一些解释会有所帮助。

【参考方案2】：

你快到了。从 Colr.org 返回的数据不是您预期的格式。使用console.log(this.state) 查看检索到的内容。您映射了返回的根 data 对象。但是，您想要的颜色嵌套在 data.data.colors 数组中。

另外，请查看Async/Await pattern 以确保您的 JSON 数据已从 API 返回，然后再尝试呈现。

这应该可行：

import React,  Component  from "react";
import logo from "./logo.svg";
import Color from "./components/Color";
import "./App.css";
import axios from "axios";

class App extends Component 
  state = 
    colors: []
  ;

  async componentDidMount() 
    const apiResults = await axios.get("http://www.colr.org/json/colors/random/2");
    this.setState(
      colors: apiResults.data.colors
    );
  

  render() 
    console.log(this.state);
    return (
      <div className="App">
        <header className="App-header">
          <img src=logo className="App-logo"  />
          <Color colors=this.state.colors />
        </header>
      </div>
    );
  

export default App;

【讨论】：

是的，它奏效了。文我得到响应表单 API，我得到一个带有数组的对象。 “数据”是否指代该对象，那么 data.data 指的是什么？到“数据”变量？

我的变量命名很糟糕。我将data 设置为等于来自 API 的响应。事实证明，API 返回了一个 colors 对象，其中包含一个 data 对象，该对象包含一个 colors 数组，其中包含您的结果。基本上，您的数据嵌套在 API 结果中。我们必须使用点表示法深入挖掘您想要的数据（颜色数组）。

我刚刚用更好的变量命名编辑了我的回复。