как передать компонентные реквизиты из React в Redux?

Question

Я постоянно получаю сообщение об ошибке, когда пытаюсь передать реквизиты (которые являются просто строкой) компонента (из компонента Table) в Redx через Connect,

Вывод ошибки, который я получаю:

TypeError: Невозможно прочитать свойство 'props' неопределенного

  13 | 
  14 | const getTableData = (state) =>{
  15 |   return{
> 16 |     fieldNames: state[this.props.tableHead]
  17 |   }
  18 | }
  19 | 

Компонент таблицы вызывается в компоненте с props:

<Table data = {'contacts'} tableHead = {'contactsKeyNames'}/>

Где компонент Table:

import React from 'react';
import '../../styles/App.css';
import {connect} from 'react-redux';

class Table extends React.Component{

  render(){
    return(
      <div> hi </div>
    )
  }  
}

const getTableData = (state) =>{
  return{
    fieldNames: state[this.props.tableHead]
  }
}

export default connect(getTableData)(Table);

и где хранилище редуксов:

const initState = {
  contacts:[
    {
      company: 'Rapid Precision Mfg.',
      title: 'Quality Engineer',
      firstName: 'Dongyob',
      lastName: 'Lee',
      officePh: '',
      ext: '',
      cell: '669-294-0910',
      email: 'dyl4810@gmail.com'   
    },
    {
      company: 'Facebook',
      title: 'Frontend Developer',
      firstName: 'Edward',
      lastName: 'Simmons',
      officePh: '408-516-4662',
      ext: '003',
      cell: '669-252-4251',
      email: 'edwardsimmons@gmail.com'   
    },
    {
      company: 'Amazon',
      title: 'Data Scientist',
      firstName: 'Harry',
      lastName: 'Davis',
      officePh: '',
      ext: '',
      cell: '408-344-2110',
      email: 'harrydavis0@gmail.com'   
    },
    {
      company: 'Google',
      title: 'Googler',
      firstName: 'Katherine',
      lastName: 'Jones',
      officePh: '408-963-7156',
      ext: '846',
      cell: '408-828-0550',
      email: 'katherinejones0@gmail.com'   
    },
    {
      company: 'Alibaba',
      title: 'Scammer',
      firstName: 'Eric',
      lastName: 'Brown',
      officePh: '510-663-5552',
      ext: '462',
      cell: '408-644-0110',
      email: 'ericbrown@gmail.com'   
    },
  ],
  contactsKeyNames:{
    company: 'Company',
    title: 'Title',
    firstName: 'First Name',
    lastName: 'Last Name',
    officePh: 'Office',
    ext: 'Ext',
    cell: 'Cell',
    email: 'Email'
  }
};
const rootReducer = (state = initState, action) => {
  return state;
};

export default rootReducer;

Я попытался привязать это к prop, настроив конструктор, как показано ниже, но не сработал.

constructor(props){
    super(props) 

    this.props = this.props.bind(this)
  }

Что я делаю не так?Помогите!

Answer 1

Взгляните на подключить документы . Вам нужно использовать аргумент ownProps для доступа к tableHead:

const getTableData = (state, ownProps) =>{
  return{
   fieldNames: state[ownProps.tableHead]
  }
};

Answer 2

Использовать mapStateToProps более идиоматично, поэтому легко понять, что происходит.Кроме того, почему бы просто не добавить в contactsKeyNames напрямую, например, так:

const mapStateToProps = (state, ownProps) => ({
  contactsKeyNames: state.contactsKeyNames
})

На мой взгляд, за этим гораздо проще следить ...

Затем вы можете ссылаться на contactsKeyNames следующим образом:

class Table extends React.Component{
  render() {
    const { contactsKeyNames } = this.props;
    ...

Answer 3

Вы также должны убедиться, что ваш компонент зарегистрирован и правильно передан Провайдеру.