Question

当我的页面呈现（客户端）

时，我收到以下错误

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

页面渲染正确，所以我只能假设组件在渲染后再次发出请求，它没有破坏任何东西（到目前为止）它只是一个恼人的错误，但是我和＃39;我试图学习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是一个空对象（或未定义），这就是你得到错误的原因。

在redux的状态改变之后，调度navLoad（）的效果将发生在下一个渲染上。

This react-redux issue可能会为您提供更多信息。

通常，当您从componentWillMount（）或componentDidMount（）方法初始化组件的某些数据时，您只需要考虑最初的＆＃34;空＆＃34;在render（）方法实现中表示第一次渲染。

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

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;

获取＆＃34;无法读取属性＆＃39; asMutable＆＃39;未定义＆＃34;即使页面呈现

1 个答案: