Question

我正在尝试将以下代码用于我使用react和redux的地方。问题是this.props.comments未定义，我做错了什么？

reducer.js：

import {Map,List} from 'immutable';

const initialState =  Map({comments:List()});

export default function(state = initialState, action) {

    switch (action.type) {  
    case 'ADD_COMMENT':
      return state.update('comments', comments => comments.push(action.comment));

    default: return state;

  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import CommentBoxContainer from './components/CommentBox';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducer from './reducer'

const store = createStore(reducer);

store.dispatch({
  type: 'ADD_COMMENT',
  comment: 
         {id: 3, author: "Me", text: "This is one comment!"}
});

ReactDOM.render(
  <Provider store={store}>   
  <CommentBoxContainer  />
  </Provider>,
  document.getElementById('root')
);

CommentBox.js

import React from 'react';
import { connect } from 'react-redux';

const CommentBox = React.createClass({
    render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList comments={this.props.comments}/>
        <CommentForm />
      </div>

    );
  }
});

function mapStateToProps(state) {
   return { comments: state.comments };
}

const  CommentBoxContainer = connect(mapStateToProps)(CommentBox);
export default CommentBoxContainer;

var CommentList = React.createClass({
    render: function() {

    var commentNodes = this.props.comments.map(function(comment) {
      return (
        <Comment author={comment.author} key={comment.id}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

const CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
      </div>
    );
  }
});

const Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
         {this.props.children}
      </div>
    );
  }
});

Answer 1

来自state的{p> Map为immutable.js。因此，在mapStateToProps中，state.comments为undefined，但state.get('comments')不应为。{/ p>

无法使用react-redux设置属性

1 个答案: