子组件调用父组件传参函数时searchDocs()未定义问题

看起来你遇到的问题是在父组件的resetFiltersState函数里，调用searchDocs()时提示该方法未定义。这大概率是类方法的this绑定问题导致的，下面帮你拆解原因和解决办法：

核心原因 #

在React类组件中，普通的类方法（比如你定义的searchDocs）默认不会自动绑定组件实例的this。虽然resetFiltersState是箭头函数（已经绑定了父组件的this），但如果searchDocs没有正确绑定，就可能出现调用时this.searchDocs为undefined的情况——尤其是在setState的回调这类异步场景下，this的指向容易出现偏差。

三种可行的解决办法 #

1. 将searchDocs改为箭头函数定义 #

直接把searchDocs定义成类的箭头函数属性，这样它会自动绑定组件实例的this，无论在哪里调用都不会丢失：

searchDocs = (currentPage = 1) => {
  const { selectedFilters, searchTags } = this.state;
  if (!searchTags.length && !Object.keys(selectedFilters).length) {
    return null;
  }
  const data = {
    query: (searchTags || [])
      .filter((item) => !item.id)
      .map((item) => item.name)
      .join(' '),
    concepts: (searchTags || []).filter((item) => !!item.id),
    selectedFilters,
    offset: (currentPage - 1) * PAGE_SIZE,
    pageSize: PAGE_SIZE
  };
  this.setState({ isLoading: true, currentPage });
  return searchNews(data)
    .then((res) => {
      this.setState({ docs: res.hits.hits, total: res.hits.total, isLoading: false });
      return res;
    })
    .then((res) => setLocalSearchResults({
      selectedFilters: this.state.selectedFilters,
      docs: res.hits.hits,
      total: res.hits.total,
      currentPage,
      searchTags
    })
    )
    .catch((err) => {
      this.setState({ isLoading: false });
      errorHandler(err, 'Error searching documents.');
    });
}

2. 在构造函数中手动绑定searchDocs #

如果更倾向于使用普通类方法，可以在组件的constructor里显式绑定this：

constructor(props) {
  super(props);
  this.state = {
    // 你的初始状态
    selectedFilters: {},
    collectionSaved: false,
    // ...其他状态
  };
  // 绑定searchDocs的this
  this.searchDocs = this.searchDocs.bind(this);
}

// 保留原来的普通方法定义
searchDocs(currentPage = 1) {
  // ...原来的代码
}

3. 调用时确保this指向正确 #

如果你不想修改方法定义，也可以在setState的回调里通过箭头函数确保this指向父组件实例，保证searchDocs能被正确调用：

resetFiltersState = () => {
  this.setState(
    { selectedFilters: {}, collectionSaved: false },
    () => this.searchDocs()
  );
};

验证建议 #

修改后，你可以在resetFiltersState里的setState回调前加个console.log(this.searchDocs)，确认它不再是undefined，再测试功能是否正常。

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