我正在尝试使用 OMDbApi 在页面上呈现电影列表,但页面上没有呈现任何内容,但我在控制台中没有收到任何错误,所以我很困惑。当检查状态时, react 开发工具显示数组中的内容,但页面上仍然没有呈现任何内容,我做错了什么?
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;
<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>
最佳答案
您收到该错误是因为您的响应是对象,而不是数组。您的对象中有一个名为 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>
) );
}
关于javascript - React 应用程序渲染空页面,控制台没有错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50537016/