Props не определяется при использовании MapStateToProps
Когда я перехожу на свою домашнюю страницу, у меня есть текущее состояние, которое представляет собой объект, состоящий из объектов, которые являются моими статьями.
articles:
0: {id:'3',body:'ballon pied ball…football'}
1: {id:'2',body:'Encore du Lorem … article'}
2: {id:'1',body:'Lorem Ipsum Dolo… article'}
Соответствует списку статей на главной странице; когда я нажимаю на один из них, он должен перенаправить меня на конкретную страницу статьи, где я могу ее прочитать. (/ статья /: идентификатор)
Поэтому я пытаюсь создать компонент статьи, который бы отображал заголовок, подзаголовок и текст. Но я получаю сообщение об ошибке «props is undefined»:
Компонент Article.js:
import React from 'react';
import { connect } from 'react-redux';
const Article = ({match}) => (
<div className = "aboutpage-wrapper">
<div className = "container">
<h1>{match.params.id}</h1>
{console.info(props)}
{/* <h2>{props.article.title}</h2>
<h3>{props.article.subtitle}</h3>
<p>{props.article.body}</p>*/}
</div>
</div>
);
const mapStateToProps = state => ({ article: state.articles[1] });
// I try to access articles[1] just to see if it works.
export default connect(mapStateToProps)(Article);
любая идея ?
Ответы 1
Это потому, что в вашем компоненте Article вы деструктурируете реквизиты: ({ match }), поэтому у вас не будет доступа к props.
Если вы хотите получить доступ к props непосредственно в компоненте Article, вам следует сделать следующее:
const Article = props => (...);
Если вы хотите продолжить деструктуризацию свойств, укажите все необходимые поля свойств следующим образом:
const Article = ({ match, article, ...rest }) => (...);
У mapStateToProps в качестве второго аргумента должен быть props. В зависимости от того, какую библиотеку вы используете (я полагаю, что response-router), в props будет id из текущей статьи. Как то так: const mapStateToProps = (state, props) => ({ article: state.articles[props.params.id] });
Я почти понял; однако я получил "не могу прочитать свойство" id "неопределенного
Вы используете пакет react-router?
Я точно использую: react-router-dom
На самом деле, я только что понял, что мое состояние - это массив объектов, а не объект объектов: [{id:1, title: 'title1'}, {id:2, title: 'title2'}, {id:3, title: 'title3'}]
Пожалуйста, ознакомьтесь с этим вопрос / ответы, чтобы понять, как получить параметры URL-адреса с помощью response-router. Как только вы получите идентификатор статьи, вам просто нужно будет найти статью по этому идентификатору. Вы можете использовать метод .find.
Хорошо, мне удалось получить нужную статью, используя это: const mapStateToProps = (state,props) => ({ article: state.articles.find(function (obj) { return obj.id === props.match.params.id; })}); , однако, console.info(props.article) returns an object, но props.article.title не определен, почему?
спасибо @Jordan Enev! тогда как мне получить нужную статью с конкретным идентификатором?