使用 React.JS 获取 API 数据的问题

Question

我正在开发一个简单的 React Web 应用程序，但在查看我从这个模拟 api 中提取的某些数据时遇到问题：https://randomuser.me/api/

这是我的代码：

import React, { Component } from 'react';

class ApiTest extends Component {
    constructor() {
      super();
      this.state = {
        names: [],
      };
    }

    componentDidMount() {

  fetch('https://randomuser.me/api/?results=10')
  .then(results => {
    return results.json();
  }).then(data => {
    let names = data.results.map((name) => {
      return(
        <div key={name.results}>
           {name.title}
        </div>
      )
    })
    this.setState({names: names});
    console.log("state", this.state.names);
  })
}

  render() {
      return (
        <div className="App">

          <div className="container2">
            <div className="container1">
              {this.state.names}   
            </div>
          </div>

        </div>
      );
    }
  }

  export default ApiTest;

我可以根据我为所有这些 (https://blog.hellojs.org/fetching-api-data-with-react-js-460fe8bbf8f2) 找到的教程提取图片，但我似乎无法显示其他任何内容。我似乎没有收到任何错误，我在控制台中看到了这些对象。我在这里做错了什么？谢谢大家！！！

Answer 1

将 jsx 放入组件状态确实不是一个好主意。状态应该由纯数据组成。然后您可以在render() 函数中灵活地转换数据：

https://codesandbox.io/s/qqy9l78l06

import React, { Component } from "react";

class ApiTest extends Component {
  constructor() {
    super();
    this.state = {
      people: []
    };
  }

  componentDidMount() {
    fetch("https://randomuser.me/api/?results=10")
      .then(results => results.json())
      .then(data => this.setState({ people: data.results }));
  }

  render() {
    console.log(this.state);
    return (
      <div className="App">
        <div className="container2">
          <div className="container1">

            {this.state.people.map(person => (
              <div>{person.name.first}</div>
            ))}

          </div>
        </div>
      </div>
    );
  }
}

export default ApiTest;