Question

我有一个SearchBar组件，它有一个子组件SearchBarItem。

我将方法File file ; // your code Intent install = new Intent(Intent.ACTION_VIEW); install.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_NEW_TASK); // Old Approach install.setDataAndType(Uri.fromFile(file), mimeType); // End Old approach // New Approach Uri apkURI = FileProvider.getUriForFile( context, context.getApplicationContext() .getPackageName() + ".provider", file); install.setDataAndType(apkURI, mimeType); install.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION); // End New Approach context.startActivity(install);传递给子组件以分派要存储的值，并且它起作用了（我从Chrome中的Redux工具中看到了）。

然后，当我尝试从方法handleSelectItem()获取值时，该方法也从父组件传递了该值，它显示：

submitSearch()

我对React还是不太熟悉。如果有人可以帮助，将不胜感激。预先感谢。

这是父组件SearchBar：

Cannot read property 'area' of undefined.

这是SearchBarItem子组件：

class SearchBar extends Component {   
  handleSelectItem = (selectCategory, selectedItem) => {
    if (selectCategory === 'areas') {
      this.props.searchActions.setSearchArea(selectedItem);
    }
  }

  submitSearch() {
    console.log(this.props.area); // this one is undefined
  }

  render() {
    return (
      <div className="searchBar">
        <SearchBarItem
          selectCategory="areas"
          name="地區"
          options={this.props.areaOptions}
          handleSelectItem={this.handleSelectItem}
          submitSearch={this.submitSearch}
        />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  area: state.search.area,
  brandOptions: state.search.brandOptions,
  vehicleTypeOptions: state.search.vehicleTypeOptions,
  areaOptions: state.search.areaOptions,
});

const mapDispatchToProps = dispatch => ({
  searchActions: bindActionCreators(searchActions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);

Answer 1

由this指针在javascript中的行为引起的问题。

通过编写代码submitSearch={this.submitSearch}，您实际上是在发送指向submitSearch方法的指针，但丢失了this指针。

该方法实际上延迟为MyClass.prototype.myMethod。通过发送指向方法MyClass.prototype.myMethod的指针，您无需指定它属于MyClass的哪个实例（如果有的话）。这不是关于this指针如何工作的最准确的解释，而是直观的解释，您可以阅读更多here有关this指针如何工作的信息

您可以选择一些解决方案：

选项一（仅 typescript / babel transpiler ）-将方法定义为类变量

class MyClass{
    myMethod = () => {
       console.log(this instanceof MyClass) // true
    }
}

这将自动为您执行选项2

选项二-将方法绑定到构造函数上

class MyClass{
    constructor(){
        this.myMethod = this.myMethod.bind(this)
    }
    myMethod() {
       console.log(this instanceof MyClass) // true
    }
}

通过第二种方法，您将方法绑定到当前实例

请注意，您应该避免这样做：

<MyComponent onSomeCallback={this.myCallback.bind(this)} />

Function.prototype.bind返回一个新方法，而不改变现有方法，因此您将为每个渲染创建一个新方法，并且对渲染有性能影响（作为选项二，仅在构造器上绑定一次就可以了））

使用React更新值后无法获取商店值

1 个答案: