Question

我正在研究一个简单的React网络应用程序，我在查看我从这个模拟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;

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

1 个答案: