即使页面呈现也出现 "Cannot read property 'asMutable' of undefined" 错误

Question

我的页面呈现（客户端）时出现以下错误

Uncaught (in promise) TypeError: Cannot read property 'asMutable' of undefined

虽然页面正确呈现，所以我只能假设组件在呈现后再次发出请求，它没有破坏任何东西（到目前为止）这只是一个烦人的错误，但是因为我正在尝试学习 React , 知道为什么会这样会很有帮助。

这是我的代码：

//nav.jsx

import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { navLoad } from '../../../scripts/actions';

export default class HeaderNav extends React.Component {
  componentWillMount() {
    const { dispatch } = this.props;
    dispatch(navLoad());
  }

  render() {
    const { nav, isFetching } = this.props;
    const navitems = nav.items.asMutable().map((item) => {
      if(item.inNav === 'header') {
        return <li key={item._id}><Link to={item.slug}>{item.name}</Link></li>
      }
    });
    return(
      <ul class="c-primary-nav">
        { navitems }
      </ul>
    )
  }
}

function select(state) {
  const { nav } = state;
  return {
    nav
  };
}

export default connect(select)(HeaderNav);

第二个分量

// socialLinks.jsx
import React from 'react';
import { connect } from 'react-redux';
import { socialLinksLoad } from '../../../scripts/actions';

export default class SocialLinks extends React.Component {
  componentWillMount() {
    const { dispatch } = this.props;
    dispatch(socialLinksLoad());
  }

  render() {
    const { socialLinks, isFetching } = this.props;
    const faString = 'fa ';
    console.log('socialLinks', socialLinks.items)
    const slComponents = socialLinks && socialLinks.items ? socialLinks.items.asMutable().map((item) => {
      return <li key={item._id}><a class={faString + item.class} title={item.title} href={item.link}>{item.label}</a></li>
    }) : null;
    if(isFetching) {
      return(
        <section class="loader">
          <span>Content is loading...</span>
        </section>
      )
    } else {
      return(
        <ul class="c-social-links">
          { slComponents }
        </ul>
      )
    }
  }
}

function select(state) {
  const { socialLinks } = state;
  return {
    socialLinks
  };
}

export default connect(select)(SocialLinks);

还包括减速器以防与问题相关

// reducer.js
export function socialLinks(state = socialLinksInitialState, action) {
  switch (action.type) {
    case GET_SOCIAL_LINKS :
      return Immutable(state).merge({
        items: action.payload.socialLinks,
        isFetching: false
      })
    case REQUEST_SOCIAL_LINKS :
      return Immutable(state).merge({
        isFetching: true
      })
    default:
      return state;
  }
}

export function nav(state = navInitialState, action) {
  switch (action.type) {
    case GET_NAV :
      return Immutable(state).merge({
        items: action.payload.nav,
        isFetching: false
      })
    case REQUEST_NAV :
      return Immutable(state).merge({
        isFetching: true
      })
    default:
      return state;
  }
}

const rootReducer = combineReducers({
  socialLinks,
  nav,
  routing: routerReducer
});

export default rootReducer;

Answer 1

componentWillMount() 方法在初始渲染发生之前立即被调用。对于第一个渲染，道具已经设置：nav 是一个空对象（或未定义），这就是你得到错误的原因。

调度 navLoad() 的效果将在下一次渲染时发生，跟随 redux 的状态变化。

This react-redux issue 可能会给您更多信息。

通常，当您从 componentWillMount() 或 componentDidMount() 方法为您的组件初始化一些数据时，您只需要考虑 render() 方法实现中的初始 "empty" 状态，因为第一次渲染。

例如，在您的情况下，就是这样：

const navitems = nav && nav.items ? nav.items.asMutable().map((item) => {
  if(item.inNav === 'header') {
    return <li key={item._id}><Link to={item.slug}>{item.name}</Link></li>
  }
}) : null;

即使页面呈现也出现 "Cannot read property 'asMutable' of undefined" 错误

Getting "Cannot read property 'asMutable' of undefined" error even though the page renders

javascript

reactjs

react-redux