Question

我正在使用REACT获取API并尝试将结果呈现在列表中。我在控制台中看到了输出，但它没有在页面上呈现。我只想要渲染的对象。我的REACT语法相当新。

import React from "react";
import { render } from "react-dom";
import ReactDOM from "react-dom";


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: 10
    };
  }

  componentDidMount() {
    var component = this;
    var url;

    fetch("https://api.spacexdata.com/v2/launches")
      .then(function(response) {
        return response.json();
      })
      .then(function(json) {
        var data = json;
        console.log(data[0]);
        console.log("hi" + data[0].flight_number);
        component.setState({
          data: json
        });
      });
  }

  render() {
    return (
      <div>
        <ul>
          <li>elo{launchInfo}</li>
        </ul>
      </div>
    );
    var launchInfo = this.state[0].data.flight_number || "";
  }
}

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

Answer 1

意图似乎是在数据中查找第一项，而不是状态。像这样：

var launchInfo = this.state.data[0].flight_number || "";

我正在尝试使用REACT将json对象渲染到列表中

1 个答案: