Как получить доступ к редукционным реквизитам с помощью условного рендеринга

Question

Я использую избыточность для извлечения данных из моего компонента, в это время все работало нормально, но теперь мне нужно использовать условный рендеринг, поэтому я создаю новую функцию Interactions, которая будет извлекать данные и фильтровать и все это , но я получаю сообщение об ошибке TypeError: Cannot read property 'props' of undefined, но если я вывожу свой this.props.feeds за пределы своей функции, которая работает хорошо, поэтому вопрос заключается в том, как я могу получить доступ к моим редукционным реквизитам внутри функции Interactions?

class Feed extends React.Component {

componentDidMount() {

    this.props.fetchActivityFeed();
}

render() {

    console.log(this.props.feeds) // this is working

    function Interactions() { 
         //Getting error here
        this.props.feeds.filter(({type}) => type === 
        'Interaction').map(( activity, i) => {
                return(<p> {activity.description}</p>);
            }
        )
    }

    const panes = [
        {
            menuItem: 'All',
            render: () => <Tab.Pane  attached={false}>  /* Here I need 
            to render my Component <Interactions/>*/ </Tab.Pane>,
        },
        {
            menuItem: 'Interactions',
            render: () => <Tab.Pane attached={false}> <Interactions/> 
        </Tab.Pane>,
        },
        {
            menuItem: 'Tasks',
            render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
        },
        {
            menuItem: 'Expenses',
            render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
        },
    ];
    return (
        <div> <Interactions /> </div>
    );
}

const mapStateToProps = state => ({
    feeds: state.ActivityFeedReducer
});

export default connect(mapStateToProps, {fetchActivityFeed})(Feed);

PS: мне нужен компонент для визуализации

Answer 1

Вы создаете компонент (<Interactions />) внутри другого компонента (<Feed />), и вы не пропускаете второй реквизит. У вас есть проблема с областью действия.

Вот что я хотел бы сделать, чтобы это исправить. Разделение файлов выглядит так:

Компонент фида:

class Feed extends React.Component {

componentDidMount() {
    this.props.fetchActivityFeed();
}

render() {
    return (
        <div> 
          <Interactions feeds={this.props.feeds} />
        </div>
    );
}

Компонент взаимодействий:

function Interactions({feeds}) { 
  return (
    <div>
      {feeds && feeds.filter(({type}) => type === 
        'Interaction').map(( activity, i) =>
            <p>{activity.description}</p>)
        )}
    </div>
  )
}

Answer 2

ПРОБЛЕМА : Вы используете 'this' внутри функционала, который относится к самой функции, то есть к функции Interactions.

РЕШЕНИЕ : отбросьте это дополнительный функциональный компонент, который вы создаете, лучше используйте реквизиты в компоненте класса Feed и верните его оттуда.

попробуйте это.

class Feed extends React.Component {

componentDidMount() {

    this.props.fetchActivityFeed();
}

render() {
    return (
            this.props && this.props.feeds && this.props.feeds.filter(({type}) => type === 'Interaction').map(( activity, i) => {
            return(<p> {activity.description}</p>);
        }
        )
    )
}

const mapStateToProps = state => ({
    feeds: state.ActivityFeedReducer
});

export default connect(mapStateToProps, {fetchActivityFeed})(Feed);