this.props дает неопределенный при использовании приставки

Question

Я новичок в редуксе.Я передал значение через 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

Причина в том, что вы передаете функцию другому компоненту, и эта функция больше не имеет привязки к вашему экземпляру класса.Он есть только в том случае, если вы вызываете его (не передаете), а реальный объект находится слева - вы можете прочитать больше в моей статье об этом .У вас есть несколько решений здесь, и вы можете прочитать о них в документах об обработке событий .Это обычный шаблон при добавлении обработчика событий.

Итак, вы можете сделать следующее:

1. использовать свойства класса:

   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)}
/>

Bind in constructor.Вы можете просто связать его в конструкторе - он создаст новую функцию при создании экземпляра, так что вы не будете делать это при каждом повторном рендеринге.Он работает примерно так же, как и первый, но более явный (и гораздо более подробный):

constructor(props) {
  super(props);

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

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

Лично я бы сказал, просто используйте первый подход, он очень распространени достаточно стабильный (это 3-й этап в предложениях).