Question

我正在尝试渲染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" alt="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}
        >
          Color{color.id}: {color.hex}
        </h1>
      ))
  }
}

export default Color;

Answer 1

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

此外，在尝试呈现Async/Await pattern之前，请确保从API返回了您的JSON数据。

这应该有效：

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" alt="logo" />
          <Color colors={this.state.colors} />
        </header>
      </div>
    );
  }
}
export default App;

Answer 2

您可以使用JSON.stringify将其转换为字符串，也可以使用util库，它对我有用。

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

2 个答案: