Question

我对反应/ redux还是很陌生，但是遇到了一个我无法理解的意外问题

我从redux检索了特定的文章，当我加载正确的页面时会触发该操作。我在redux开发工具中看到，文章已正确装入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: {
   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>
  );
};

非常感谢您

Answer 1

在最初的渲染注释中，注释将只有一个空数组，因此您无法对其进行迭代，注释中将没有标题。因此，comment.title导致了您的问题。要解决此问题，请在使用地图之前对其进行检查：

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

您还可以检查标题：

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

无法访问redux对象数组属性

1 个答案: