Question

我正在尝试使用OMDbApi在页面上呈现电影列表，但页面上没有任何渲染，但我没有在控制台中出现任何错误，所以我很困惑。当检查状态时，react dev工具显示数组中的内容，但页面上仍然没有任何内容呈现我做错了什么？

A       B       C
0.10    spam    0.07
0.40    0.30    0.30
0.70    0.17    0.13    
spam    0.04    0.24    
0.15    0.07    spam

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      movies: [] //default state
    }
  };


  componentWillMount(){
    let movieApi = 'http://www.omdbapi.com/?apikey=[apikey]&s=harry'
    fetch(movieApi)
    .then(data => data.json())
    .then(movies => this.setState({movies}))
  }

  // <li>
  //     <img src="<%= movie['Poster'] %>">
  //     <b><%= movie['Title'] %></b> -
  //     <%= movie['Year'] %>
  //   </li>
  
  render() {
    let views = <div>Loading...</div>
      const {movies} = this.state;
    if(movies && movies.length > 0) {
      views = movies.Search.map(m => (
        <li key={m}>
          <b>{m.Title}</b> - <strong>{m.Year}</strong>
        </li>
      ))
    }
    

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>

        {views}
      </div>
    );
  }
}

export default App;

Answer 1

您收到该错误，因为您的响应是对象，而不是数组。您的对象中有一个名为Search的数组。改变你的检查条件：

if(movies.Search && movies.Search.length > 0)

但是，我更喜欢以不同的方式设置状态并以简单的方式检查条件。

fetch( "http://www.omdbapi.com/?apikey=[api_key]&s=harry" )
            .then( data => data.json() )
            .then( json => this.setState( { movies: json.Search } ) );

然后在你的组件中：

const { movies } = this.state;
        if ( movies.length ) {
            views = movies.map( m => (
                <li key={m}>
                    <b>{m.Title}</b> - <strong>{m.Year}</strong>
                </li>
            ) );
        }

Answer 2

如果没有渲染，请确保index.js文件包含以下内容：

import React from 'react';
import ReactDOM from 'react-dom';

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

但即使你的App组件加载后，AJAX调用也会返回

"{"Response":"False","Error":"Invalid API key!"}"

因此if条件永远不会是true，除了“正在加载......”之外你不会看到任何其他内容。

React app呈现空白页面，控制台没有错误

2 个答案: