Question

我有一个component，在更新store

后不会更改数据

class RenderComments extends Component {

  commentsParse() {
    return this.props.comments.map((comment) => {

      if (comment.hasComments === true) {

        return (
          <div key={comment.id}>
            <CommentItem  data={comment} />        
          </div>
        ) // return
      } 
    }); // this.props.comments.map()
  } // commentParse

  render() {
    return (
      <div>
        { this.commentsParse() }
      </div>
    ) // return
  } // render
} // RenderComments

function mapStateToProps(state) {
  return {
    comments: state
  }
}

export default connect(mapStateToProps)(RenderComments);

dispatcher

class AddComment extends Component {

  constructor(props) {
    super(props);
    this.state = {
      comment: ''
    }
  }

  addNewComment() {
    this.props.addNewComment(this.state);
  }

  render() {
    return (
      <form>
        <div className="comment-entry">
          <div className="form-group">
            <textarea
              onChange={event => this.setState({comment: event.target.value})}
            >
            </textarea>
          </div>
          <div className="comment-entry-footer">
            <button
              onClick={() => this.addNewComment()}
            >
              Submit
            </button>
          </div>
        </div>
      </form>
    ) // return
  } // render
} // AddComment

function mapStateToProps(state) {
  return {
    comment: state
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({addNewComment}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(AddComment);

这是我的reducer

import { ADD_COMMENT } from './../constants';

let allUserComments = [/* Array with 4 objects */]

const createNewComment = (action) => {
      let d = new Date();
  let n = d.toLocaleTimeString();

  let newComment = {
    id: Math.random(),
    rating: 0,
    name: 'MyNick',
    thumbnail: 'icon.50x50.png',
    time: n,
    comment: action.text.comment,
    replyTo: null,
    replyToUser: null,
    hasComments: false
  }

  allUserComments.push(newComment);
  return allUserComments;
}

export default (state = allUserComments, action) => {

  switch (action.type) {
    case ADD_COMMENT:
      allUserComments = createNewComment(action);
      return allUserComments;
    default:
      return state;
  }
}

在第一次启动应用程序中，我的component显示了返回state的4个对象，即reducer，但在action后，component无法重新呈现，它继续显示4个对象而不是5.为什么component不更新？

Answer 1

您的reducer在几个级别上非常错误。它没有遵循不可更新地更新数据的要求。

首先，你不应该在reducer函数之外维护一个单独的allUserComments数组。

其次，您不应该使用.push()来改变数组 - 您可能希望使用.concat()返回一个也包含添加项的新数组。

第三，您还在减速器中生成新的ID值。

这些都没有遵循＆＃34;纯粹的功能＆＃34; Reducer中的不可变更新。由于您直接改变状态并保持相同的数组引用，这几乎肯定会使您的组件无法正常更新。

请参阅Redux FAQ entry on mutations keeping components from rendering了解详情以及Structuring Reducers - Immutable Update Patterns部分。

为什么更新存储后，组件不会更改（React-Redux）

1 个答案: