React应用编译报错'movies' is not defined 问题排查求助

错误根因 #

你在render函数里直接写了movies && movies.length，但movies并没有在render作用域内声明，你把它存在了组件的state属性里，读取时必须加this.state前缀才能正确访问，和req.end的逻辑没有关系。

修复代码 #

直接修改render方法里的条件判断部分即可，修改后的完整render代码如下：

render() {
  return (
    <div className="App">
      <header className="App-header">
      {
        // 把movies替换成this.state.movies即可
        this.state.movies && this.state.movies.length ? this.state.movies.map((movie) => {
          return <Movie key={movie.imdbID} {...movie}/>
        })
        : null
      }
       <Search handleSendRequest={this.sendRequest}/>
      </header>
    </div>
  );
}

额外优化提示：列表渲染的map需要给子组件加唯一key属性，这里用电影的imdbID作为key即可，避免React抛出列表key缺失的警告。另外你初始state已经把movies设为空数组了，甚至可以简化判断，直接写this.state.movies.map(...)，空数组调用map不会报错也不会渲染内容。

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