（TypeError）：无法读取未定义的属性“ props”

Question

我有一个名称为Search的组件，该组件负责所有搜索

码：

class Search extends Component {
  state = {
    searchResult: []
  }

  async componentDidMount() {
    await this.props.searchAssets(this.props.match.params.name);
    this.handleState();
  }

  handleState() {
    this.setState({ searchResult: this.props.searchResult });
  }

  async handleSearch(e) {
    e.preventDefault();
    await this.props.searchAssets(e.target.q.value);
    this.handleState()
  }

  render() {
    return (
      <div className="content-block">
        <form onSubmit={this.handleSearch} className="search-form">
            <button>بحـث</button>
            <input type="text" defaultValue={this.props.match.params.name} name="q" placeholder="Est: Game of thrones, Vikings or Deadpool" />
        </form>
        <div className="display-latest">
          ***the div where search results are shown***
        </div>
      </div>
    )
  }
}

直到我尝试在页面上添加另一个搜索表单之前，它的运行情况都很好，我试图使它重用来自redux的操作，但是它一直给我这个错误

（TypeError）：无法读取未定义的属性“ props”

即使我尝试使用构造函数并将其绑定。

另外，如果有一种更好的方法来触发搜索而不加载页面，我也很乐意做笔记。 :)

Answer 1

函数handleState和handleSearch缺少对此的引用。 您可以通过以下两种方式获得参考：

1. 如果您正在使用看起来像您的情况的transform-class-properties ，则可以将功能更改为箭头功能。

2. 您必须使用以下方式将函数绑定到构造函数中：

   this.handleState = this.handleState.bind(this);

这些都应该在这里解决此问题。