Question

我是redux的新手。我已经通过mapStateToProps传递了一个值，并且this.props在render()内部具有值。但是，如果在下面的示例中像在this.props函数中那样在函数中控制台renderRow，它将给出未定义的信息。为什么会这样？

constructor() {
    super();
}

renderRow(rowData) {
    //this.console gives undefined why
    console.log('props1', this.props);
}

render() {
    //this.props has value here
    {console.log('props1', this.props)}
    return (
      <View style={styles.container}>

        <ListView
            dataSource={this.dataSource}
            renderRow={this.renderRow}
        />

      </View>
    ); 
}

const mapStateToProps = state => {
    return {selectionsList: state.selections, 
            selectionId: state.selectionId};
}

Answer 1

这样做的原因是您将一个函数传递给另一个组件，并且该函数不再与您的类实例绑定。仅当您用左侧的实际对象调用它（不通过）时，它才具有它–您可以在my article about this中阅读更多内容。您在这里有几种解决方案，可以在docs about event handling中阅读有关它们的信息。添加事件处理程序时，这是一种常见的模式。

因此，您可以执行以下操作：

使用类属性：

renderRow =（rowData）=> { console.log（'props1'，this.props）; }

如果以这种方式使用它，它将自动将您的函数绑定到您的实例。

只需在传递回调时创建一个新的箭头函数：

<ListView
    dataSource={this.dataSource}
    renderRow={(data) => this.renderRow(data)}
/>

箭头功能没有自己的this，因此可以正常工作。

当您将方法作为属性传递时，可以绑定方法。它的工作方式几乎与上一个相同-每次渲染时，我们都会创建一个新函数：
```
<ListView
    dataSource={this.dataSource}
    renderRow={this.renderRow.bind(this)}
/>
```
绑定在构造函数中。您可以将其绑定到构造函数中-实例化时它将创建一个新函数，因此您无需每次重新渲染。它的工作方式与第一个类似，但是更明确（也更冗长）：
```
constructor(props) {
  super(props);

  this.renderRow = this._renderRow.bind(this);
}

_renderRow(data) {
   console.log('props1', this.props);
}
```

我个人会说只使用第一种方法，它非常普遍且足够稳定（这是提案的第3阶段）。

使用redux时this.props给出undefined

1 个答案: