无法读取 Constructor.render 处未定义的属性 'code' (Photo.js:14)

Question

所以这个问题是在浏览器（页面）重新加载后直接引起的，并遵循 4 个不同的步骤。

'Load Posts has been fired (actionCreators.js:26) - This is an asynchronous thunk call to firebase':

// fetch posts
export function fetchPosts() {
  console.log("Load Posts has been fired");
  return dispatch => {
    Posts.on('value', posts => {
      dispatch({
        type: 'FETCH_POSTS',
        payload: posts.val()
      });
    });
  };
}

'Load Comments has been fired (actionCreators.js:39) - This is an asnychronous thunk call to firebase':

// fetch comments
export function fetchComments() {
  console.log("Load Comments has been fired");
  return dispatch => {
    Comments.on('value', comments => {
      dispatch({
        type: 'FETCH_COMMENTS',
        payload: comments.val()
      });
    });
  };
}

Note: firebase call in actioncreators.js

import * as firebase from 'firebase';

//Firebase configuration details and initialisation
import { Firebase_Config } from '../data/config';
firebase.initializeApp(Firebase_Config);
const rootRef = firebase.database();
const Posts = rootRef.ref('posts');
const Comments = rootRef.ref('comments');

'未捕获类型错误：无法读取未定义的属性 'code''

at Constructor.render (Photo.js:14)
at Constructor.tryRender [as render] (index.js:34)
at Constructor.proxiedMethod [as render] (createPrototypeProxy.js:44)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:587)
at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:607)
at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (ReactPerf.js:66)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:220)
at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
at Object.mountComponent (ReactReconciler.js:37)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:241)
at ReactDOMComponent._createContentMarkup (ReactDOMComponent.js:591)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:479)
at Object.mountComponent (ReactReconciler.js:37)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
at Object.mountComponent (ReactReconciler.js:37)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:241)
at ReactDOMComponent._createContentMarkup (ReactDOMComponent.js:591)
at ReactDOMComponent.mountComponent (ReactDOMComponent.js:479)
at Object.mountComponent (ReactReconciler.js:37)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
at Object.mountComponent (ReactReconciler.js:37)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
at Object.mountComponent (ReactReconciler.js:37)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
at Object.mountComponent (ReactReconciler.js:37)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
at Object.mountComponent (ReactReconciler.js:37)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
at Object.mountComponent (ReactReconciler.js:37)
at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:225)
at ReactCompositeComponentWrapper.wrapper [as mountComponent] (ReactPerf.js:66)
at Object.mountComponent (ReactReconciler.js:37)
at mountComponentIntoNode (ReactMount.js:266)
at ReactReconcileTransaction.perform (Transaction.js:136)
at batchedMountComponentIntoNode (ReactMount.js:282)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:136)
at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
at Object.batchedUpdates (ReactUpdates.js:94)
at Object._renderNewRootComponent (ReactMount.js:476)
at Object.wrapper [as _renderNewRootComponent] (ReactPerf.js:66)
at Object._renderSubtreeIntoContainer (ReactMount.js:550)
at render (ReactMount.js:570)
at wrapper (ReactPerf.js:66)
at Object.<anonymous> (reduxstagram.js:37)

页面数据现已成功加载并呈现给浏览器

[HMR] connected (client.js: 67)
comments.js:23 FETCH_COMMENTS triggered (comments.js:23)

Photo.js的代码如下：

import React from 'react';
import Comments from './Comments';
import CSSTransitionGroup from 'react-addons-css-transition-group';
import { Link } from 'react-router';

const Photo = React.createClass({
  propTypes: {
      post: React.PropTypes.object,
      comments: React.PropTypes.object,
      i: React.PropTypes.string
  },
  getDefaultProps: function() {
      return {
        post: {
          caption: '',
          code: '-1rhFawccs',
          display_src: 'https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e35/12331333_1650987978502155_1162510634_n.jpg',
          likes: 0
        },
        comments: {
          text: 'One flew over the cuckoos nest',
          user: 'Tracey Summers'
        },
        i: '1'
      };
  },
  render() {
    const { post, i, comments } = this.props;
    return (
      <figure key={i} className="grid-figure">

        <div className='grid-photo-wrap'>
          <Link to={`/view/${post.code}`}>
            <img className='grid-photo' src={post.display_src} alt={post.caption} />
          </Link>

          <CSSTransitionGroup transitionName="like" transitionEnterTimeout={500} transitionLeaveTimeout={500}>
            <span key={post.likes} className="likes-heart">{post.likes}</span>
          </CSSTransitionGroup>

        </div>

       <figcaption>
          <p>{post.caption}</p>

          <div className="control-buttons">
            <button onClick={this.props.increment.bind(null,i)} className="likes">&hearts; {post.likes}</button>

            <Link to={`/view/${post.code}`} className="button">
              <span className="comment-count">
                <span className="speech-bubble"></span>     {(comments[post.code] ? Object.keys(comments[post.code]).length : 0)}
              </span>
            </Link>
          </div>

        </figcaption>

      </figure>
    )
  }
});

export default Photo;

主要成分Photo.js包含在

import React from 'react';
import Photo from './Photo';
import Comments from './Comments';

const Single = React.createClass({

  render() {
     const i  = this.props.params.postId;
     const posts = this.props.posts;

    return (
      <div className="single-photo">
        <Photo key={i} i={i} post={posts[i]} {...this.props} />
        <Comments {...this.props} postId={i} />
      </div>
    );
  }
});

export default Single;

如何解决这个问题？

Answer 1

看起来当您安装 <Photo /> 组件时还没有获取数据，这就是 photo 是 undefined 的原因。您可以提供 defaultProps 或者甚至不安装您的组件 { post && <Photo post={post} >}

无法读取 Constructor.render 处未定义的属性 'code' (Photo.js:14)

Cannot read property 'code' of undefined at Constructor.render (Photo.js:14)

javascript

reactjs

firebase

firebase-realtime-database

redux-thunk

无法读取 Constructor.render 处未定义的 属性 'code' (Photo.js:14)

Cannot read property 'code' of undefined at Constructor.render (Photo.js:14)

javascript

reactjs

firebase

firebase-realtime-database

redux-thunk

无法读取 Constructor.render 处未定义的属性 'code' (Photo.js:14)