Невозможно прочитать свойство 'map' из undefined - реагировать, редукс

Question

Я пытаюсь показать список статей в моем компоненте и получаю сообщение об ошибке «Невозможно прочитать карту свойств» неопределенной «ошибки» в моем компоненте «articleList.js». Что не так с моим кодом?а также когда я регистрирую статьи, это не определено.

У меня есть код ниже в моем редукторе:

 const initialState = {
  articles: [],
  loading: false,
  error: null
  };


export default (state=initialState, action) => {
switch (action.type) {
    case GET_ARTICLES:
      return {
         ...state,
         articles: action.payload,
         loading: false
     };

код для действия:

 export const getArticles =()=> dispatch =>{
 fetch('http://localhost:8000/api/articles/')
.then(handleErrors)
.then(res => dispatch(
    {
        type : GET_ARTICLES,
        payload: res.json
    }
))}

код для компонента:

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

render() {
    const { articles } = this.props.article;

return (
  <div>
    <div>
      <div>
        {articles.map(({ id, header }) => (
          <div key={id} timeout={500} className="fade">
            <div>
              <button className="remove-btn" onClick={this.onDeleteClick.bind(this, id)} >Remove</button>
              {header}
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);
}
}

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

   export default connect(
        mapStateToProps, { getArticles} )(ArticleList);

Извините за большой объем выгруженного кода, он просто связан со всем, и я считаю, что ошибка находится где-то в пределах неопределенного initialState, но я не вижу, что я пропустил, определяя

Answer 1

Кажется, вы путаете себя с именами переменных единственного / множественного числа.Ваше действие устанавливает articles как множественное число в состоянии редукторов:

return {
  ...state,
  articles: action.payload,

Так, когда вы mapStateToProps:

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

state.article будет undefined как редуктор никогда не устанавливает его как единственную переменную.Также из предоставленного вами фрагмента я не вижу смысла использовать единственный термин в любом случае.

Так что попробуйте изменить как:

  const { articles } = this.props.articles;

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

Answer 2

Ну, я думаю, вам просто нужно проверить, не определены ли ваши статьи, обновление состояния может быть асинхронным, поэтому при первом вызове метода рендеринга он был неопределенным, просто сделайте что-то вроде

{articles ? {articles.map(({ id, header }) => (
      <div key={id} timeout={500} className="fade">
        <div>
          <button className="remove-btn" onClick={this.onDeleteClick.bind(this, id)} >Remove</button>
          {header}
        </div>
      </div>
    ))} : null }