Question

我无法让应用程序呈现这个简单的状态数据。在我看来，我无法获取渲染部分中的信息来理解数据json。

this.state.data应该包含该对象，因为我可以在获取它时控制它。记录它。

我假设对象能够按原样呈现

<TASK>

Answer 1

您有几个错误 - 请参阅代码中的修正和注释：

＆＃13;

class App extends React.Component {

  loadData() {
    console.log("loading data");
    fetch('https://api.nytimes.com/svc/movies/v2/reviews/search.json?api-key=f90d8b6f90d04bb5bbbeb2f241155ce7&query=star wars')
      .then(response => response.json())
      .then(data => {
        this.setState({ data: data });
      })
      .catch(err => console.error(this.props.url, err.toString()))
  }

  constructor(props) {
    super(props);
    this.state = { data: null }; // initialize with null
  }

  componentDidMount() {
    console.log('GrandChild did mount.');

    this.loadData()
  }

  render() {
    const { data } = this.state;
    return (
      <ul>
        // if data not loaded null will render nothing
        // if data is not null, we iterate data.results with map
        {data && data.results.map(function (film, index) {
          // film is an object, just one or more properties to render
          return <li key={index}>{film.headline}</li>;
        })}
      </ul>
    );
  }
}

ReactDOM.render(
  <App />,
  app
);

＆＃13;

<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="app"></div>

＆＃13;

在React中渲染状态json

1 个答案: