Не удается получить доступ к свойству массива избыточного объекта - PullRequest
Новая
       1

Не удается получить доступ к свойству массива избыточного объекта

0 голосов
/ 28 июня 2019

Я довольно новичок в реагировании / редукции, и у меня возникла непредвиденная проблема, которую я не могу понять

Я получаю конкретную статью из избыточности, действие запускается, когда я загружаю правильнуюстр.Я вижу в инструментах redux dev, что статья правильно загружена в state.article все работает нормально.

Редуктор (упрощенно): 

const initialState = {
  article: null,
  loading: true,
};

export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case GET_TARGET_ARTICLE:
      return {
        ...state,
        article: payload,
        loading: false
      };

}

Действие: 

export const getTargetArticle = slug => async dispatch => {
  try {
    const res = await axios.get("api/article/" + slug);
    dispatch({
      type: GET_TARGET_ARTICLE,
      payload: res.data
    });
  } catch (err) {
    ...
  }
};

Вот что должен иметь объект article: 

article: {
   title:"",
   content: "",
   comments:[],
}



Проблема: Как я уже сказал, state.article заполнен правильно, и я могудоступ title и content.Но когда я пытаюсь получить доступ к комментариям, я получаю неприятный Cannot read property 'comments' of null.Есть идеи почему?

Вот как я могу это отобразить, если это поможет: 

const Article = ({ getTargetArticle, article: { article, loading }, match }) => {
  useEffect(() => {
    getTargetArticle(match.params.slug);
  }, []);

  let commentsList = article.comments.map((comment, index) => (
    <Fragment>{comment.title}</Fragment>
  ));

  return (
    <Fragment>
      {article && article.title}
      {commentsList}
    </Fragment>
  );
};

Большое спасибо

1 Ответ

1 голос
/ 28 июня 2019

При начальном рендеринге комментарии будут иметь только пустой массив, поэтому вы не сможете перебирать его, и внутри комментариев не будет заголовка.Итак, comment.title вызывает у вас проблему.Чтобы решить эту проблему, проверьте это перед использованием карты: 

  let commentsList = article.comments.length && 
    article.comments.map((comment, index) => (
    <Fragment>{comment.title}</Fragment>
  ));

Вы также можете проверить название: 

<Fragment>{comment.title && comment.title || ''}</Fragment>
...