TypeError：无法读取React.js上未定义的属性'map'

Question

我正在关注有关受控输入的React.js在线教程，并且反复出现错误

TypeError：无法读取未定义的属性“ map”

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;

Answer 1

您应该在调用super时添加props ，也不会显示整个应用程序逻辑， props.calls是否被定义？

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

Answer 2

似乎呼叫道具未定义。

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

请参考以下代码：

<ul>
    {(this.props.calls || []).map(call => (
        <CallRow call={call} key={call.id} />
    ))}
</ul>

Answer 3

1检查是否将道具添加为组件SearchPage为

<SearchPage calls ={arry}/>

并检查是否该数组2添加

constructor(props) {
    super(props);

在此const {calls}=this.props;的make析构const {calls}=this.props; 然后检查调用的值（如果它通过使用的console.log(calls)作为道具传递console.log(calls)