开发者问题收集

TypeError:无法读取 React.js 上未定义的属性“map”

2019-09-11
274

我正在按照在线教程学习有关 React.js 的受控输入,但不断收到错误

TypeError: Cannot read property 'map' of undefined

import CallRow from "./CallRow";
import React from "react";

class SearchPage extends React.Component {
  constructor() {
    super();
    this.state = {
      search: "Level Up"
    };
  }

  updateSearch(event) {
    this.setState({ search: event.target.value.substr(0, 20) });
  }

  render() {
    return (
      <div>
        <ul>
          {this.props.calls.map(call => (
            <CallRow call={call} key={call.id} />
          ))}
        </ul>
        <input
          type="text"
          value={this.state.search}
          onChange={this.updateSearch.bind(this)}
        />
      </div>
    );
  }
}

export default SearchPage;
3个回答

看起来调用的prop未定义。

在映射prop值之前,请检查它是否未定义。

请参考以下代码:

<ul>
    {(this.props.calls || []).map(call => (
        <CallRow call={call} key={call.id} />
    ))}
</ul>
Sooraj Jose
2019-09-12

您应该在调用 super 时添加 props ,另外您没有显示整个应用程序逻辑, props.calls 是否定义?

class SearchPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      search: "Level Up"
    };
  }
...
Dennis Vash
2019-09-11

1 检查是否将 props 添加到 SearchPage 组件中,如下所示:

<SearchPage calls ={arry}/>

并检查是否存在此数组 2在为 props 创建析构函数后,添加

constructor(props) {
    super(props);

,然后使用 const {calls}=this.props; 检查 calls 的值是否作为 props 传递,方法是使用 console.log(calls)

Mohammed Al-Reai
2019-09-12