При попытке перейти на страницу статьи возникла проблема.

Question

Мой маршрут из компонента приложения:

<Route path="/articles/:id" component={ArticleDetail} />

Мой компонент:

class ArticleDetail extends Component {

constructor(props) {
    super(props);
    this.state = {
        articleId: props.match.params.id,
        article: this.props.articleDetail(props.match.params.id),
    };
}

// componentDidMount() {
//     this.props.articleDetail(this.state.articleId)
// };

componentWillMount() {
    this.props.articleDetail(this.state.articleId)
};

render() {
    console.log('state', this.state);
    console.log('props', this.props);
    return (
        <div className="article-container">
            <h3 className="article-headline">{this.state.article.headline}</h3>
            {
                this.state.article.img_name &&
                <img src={require('../images/articles/' + this.state.article.img_name)} alt=""/>
            }
            <p className="article-description">{this.state.article.description}</p>
            <p>
                <span>Published at {this.state.article.created} by </span>
                <span className="username">{this.state.article.author.username}</span>
            </p>
        </div>
    )
}
}

const mapStateToProps = state => {
  return {
    articles: state.articles,
    article: state.article,
  }
};

const mapDispatchToProps = dispatch => {
  return {
    articleDetail: (id) => {
        dispatch(articles.articleDetail(id)).then((res) => {console.log('fetch', res)});
    }
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(ArticleDetail);

console.log из mapDispatchToProps возвратил мою статью из api: {type: "GET_ARTICLE", article:{…}}

мой редуктор:

import {FETCH_ALL_ARTICLES, GET_ARTICLE} from "../constants";


const initialState = [];

export default function articles(state=initialState, action) {

  switch (action.type) {

    case FETCH_ALL_ARTICLES:
      return [...state, ...action.articles];

    case GET_ARTICLE:
      // return [...action.article];
      console.log(action.article);
      return action.article;

   default:
     return state;
  }
}

Но я не получаю данные в компоненте ни в подпорках, ни в состоянии.Как вы можете видеть из кода, я попытался создать его с помощью двух разных хуков и непосредственно в конструкторе.Я надеюсь на вашу помощь.Что я делаю?

Answer 1

В mapStateToProps у вас есть ссылка на state.article, но это undefined.Вам необходимо создать ключ article в состоянии.В редукторе:

const initialState = {};

export default function articles(state = initialState, action) {

  switch (action.type) {

    case FETCH_ALL_ARTICLES:
      return { ...state, { articles: action.articles } };

    case GET_ARTICLE:
      return { ...state, { article: action.article } };

   default:
     return state;
  } 

}

И в mapStateToProps:

const mapStateToProps = state => {
  return {
    articles: state.articles,
    article: state.article,
  }
};

Я не тестировал его, но он должен работать.