React应用渲染空白页面无控制台报错，OMDbApi数据无法展示

我帮你排查了下代码，页面空白的核心原因是对OMDb API返回的数据结构处理有误，再加上几个小细节问题，导致即使state已有数据，也没法正常渲染出来。

1. API返回数据结构处理错误 #

OMDb搜索接口返回的格式是这样的（简化版）：

{
  "Search": [
    {"Title": "...", "Year": "...", "imdbID": "..."},
    // 更多电影条目
  ],
  "totalResults": "xx",
  "Response": "True"
}

你在componentWillMount里直接把整个API返回结果赋值给了state的movies：

.then(movies => this.setState({movies}))

这就导致state里的movies从初始数组变成了包含Search数组的对象。之后你在render里判断movies.length > 0，但对象是没有length属性的，这个条件永远不成立，页面就一直显示Loading...。

修复方法：
修改setState逻辑，只取返回结果里的Search数组，同时加个兜底避免API返回异常：

.then(data => data.json())
.then(result => this.setState({ movies: result.Search || [] }))

2. key属性使用不规范 #

你现在给<li>的key是整个电影对象m，React要求key必须是稳定且唯一的字符串/数字，直接用对象当key不符合规范，应该用每个电影独有的imdbID：

<li key={m.imdbID}>
  <b>{m.Title}</b> - <strong>{m.Year}</strong>
</li>

3. 生命周期方法过时（可选优化） #

componentWillMount已经是React的过时生命周期了，推荐换成componentDidMount，它更符合React的渲染逻辑，不会有预渲染的潜在问题：

componentDidMount(){
  let movieApi = 'http://www.omdbapi.com/?apikey=[apikey]&s=harry'
  fetch(movieApi)
  .then(data => data.json())
  .then(result => this.setState({ movies: result.Search || [] }))
}

4. HTML结构不合法（额外修复） #

你之前直接把li作为div的子元素，这不符合HTML规范，我在修复后的代码里加了<ul>标签包裹所有li，保证页面结构合法。

完整修复后的代码 #

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: [] // 默认初始状态
    };
  };
  
  componentDidMount(){
    let movieApi = 'http://www.omdbapi.com/?apikey=[apikey]&s=harry'
    fetch(movieApi)
    .then(data => data.json())
    .then(result => this.setState({ movies: result.Search || [] }))
  }

  render() {
    let views = <div>Loading...</div>
    const {movies} = this.state;
    if(movies.length > 0) {
      views = (
        <ul>
          {movies.map(m => (
            <li key={m.imdbID}>
              <b>{m.Title}</b> - <strong>{m.Year}</strong>
            </li>
          ))}
        </ul>
      )
    }
    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;

现在你再运行代码，应该就能正常渲染出哈利波特相关的电影列表啦！

内容的提问来源于stack exchange，提问作者seyi