javascript - 在 react 中渲染 api 响应数组对象

Question

我正在尝试从 API 获取一些数据并循环遍历已解析的响应内容并呈现它们。

但是我收到了警告

webpackHotDevClient.js:138 ./src/App.js

Line 20:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

这是我的 App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import './Api.css';

class App extends Component {

  render() {
    var request = new XMLHttpRequest();
    var listItems;
    request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);
    request.onload = function () {

      // Begin accessing JSON data here
      var data = JSON.parse(this.response);

      if (request.status >= 200 && request.status < 400) 
      {
            listItems = data.forEach(movie => {
                <div className="card">
                    <h1>{movie.title}</h1>
                    <p>{movie.description}</p>
                </div>
            });
      } 
      else {
        console.log('error');
      }
    }

    request.send();

    return (
    <div className="App">
        <img src={logo} className="App-logo" alt="logo" />
        <div className="container">
            {listItems}
        </div>
    </div>
    );
  }
}

export default App;

当我在 request.send() 之后尝试 console.log(listItems) 时，我得到了 undefined。

我假设 undefined 问题可能是因为 asynchronous 行为。如何呈现这些元素？

Answer 1

render 方法不适合发出异步请求。您应该在合适的生命周期方法中移动获取代码，例如 componentDidMount，或者使用一个函数，然后从 componentDidmount 中调用它。然后，使用组件状态，您需要将获取的数据放入您的状态。

警告来自 linter。您正在使用 forEach 并且 forEach 不返回任何内容。这就是警告说它期望在那里进行赋值或函数调用的原因。您应该使用 map 来创建 JSX 元素，而不是 forEach。

对于 undefined 部分，您猜对了。您的请求是异步的，并且您的呈现方法不等待异步请求完成其工作，想要立即呈现 listItems 但还没有 listItems :) 这就是为什么我们正在使用 React 的最佳部分之一:状态和生命周期方法。

class App extends React.Component {
  state = { movies: [] };

  componentDidMount() {
    this.getItems();
  }

  getItems = () => {
    const that = this;
    const request = new XMLHttpRequest();
    request.open("GET", "https://ghibliapi.herokuapp.com/films", true);
    request.onload = function get() {
      const data = JSON.parse(this.response);

      if (request.status >= 200 && request.status < 400) {
        that.setState({ movies: data });
      } else {
        console.log("error");
      }
    };

    request.send();
  };

  listItems = () =>
    this.state.movies.map(movie => (
      <div className="card">
        <h1>{movie.title}</h1>
        <p>{movie.description}</p>
      </div>
    ));

  render() {
    return (
      <div className="App">
        <div className="container">{this.listItems()}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>