传递给 connect() 的组件未呈现

Question

在下面的代码中，如果我只从mapStateToProps 返回一个topic 对象，则SingleTopic 组件在状态更新时不会重新渲染。但是如果我从它返回{ topic, state }，组件就会重新渲染。

import React from 'react';
import { connect } from 'react-redux';
import SingleTopic from '../components/SingleTopic';
import { incrementTopicRating, decrementTopicRating } from '../actions/forum';

let mapStateToProps = (state, ownProps) => {
  let topic = state.filter((t) => {
    return +t.id === +ownProps.params.id;
  })[0];

  return { topic };
};

let mapDispatchToProps = (dispatch) => {
  return {
    onUpvote: (id) => { dispatch(incrementTopicRating(id)); },
    onDownvote: (id) => { dispatch(decrementTopicRating(id)); }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(SingleTopic);

我可能做错了什么，但据我了解，传递给connect 的组件应该会在状态更新时自动更新。谁能解释一下我的错误在哪里？

减速机：

export default (state = [], action) => {
  switch (action.type) {
    case 'ADD_TOPIC': return addTopic(state, action);
    case 'INCREMENT_TOPIC_RATING': return incrementTopicRating(state, action);
    case 'DECREMENT_TOPIC_RATING': return decrementTopicRating(state, action);
    default: return state;
  }
};

const addTopic = (state, action) => {
  let { title, body, id, rating } = action;
  let newTopic = { title, body, id, rating };
  return [newTopic, ...state];
};

const incrementTopicRating = (state, action) => {
  return state.map((topic) => {
    if (+topic.id === +action.id) {
      topic.rating += 1;
      return topic;
    }
    return topic;
  });
};

const decrementTopicRating = (state, action) => {
  return state.map((topic) => {
    if (+topic.id === +action.id) {
      topic.rating -= 1;
      return topic;
    }
    return topic;
  });
};

UPD 如果我向返回的对象添加第二个属性，则会呈现 SingleTopic 组件。而且这个属性必须是数组或者对象类型，像这样：

let foo = [];

return { topic, foo };

Answer 1

你在你的 reducer 的 incrementTopicRating 和 decrementTopicRating 方法中改变了状态。

这是您的 recuder 的更新代码：

export default (state = [], action) => {
  switch (action.type) {
    case 'ADD_TOPIC': return addTopic(state, action);
    case 'INCREMENT_TOPIC_RATING': return incrementTopicRating(state, action);
    case 'DECREMENT_TOPIC_RATING': return decrementTopicRating(state, action);
    default: return state;
  }
};

const addTopic = (state, action) => {
  let { title, body, id, rating } = action;
  let newTopic = { title, body, id, rating };
  return [newTopic, ...state];
};

const incrementTopicRating = (state, action) => {
  const newState = state.map((topic) => {
    if (+topic.id === +action.id) {
      return Object.assign({}, topic, { rating: topic.rating+1 });
    }
    return topic;
  });

  return newState;
};

const decrementTopicRating = (state, action) => {
  return state.map((topic) => {
    if (+topic.id === +action.id) {
      return Object.assign({}, topic, { rating: topic.rating-1 });
    }
    return topic;
  });
};

这是一个带有更正解决方案的 JSBIN：https://jsbin.com/nihabaqumo

为了避免将来出现此类问题，请考虑使用允许您生成不可变数据的库，例如 facebook Immutable 之一。使用这种库创建一个一旦创建就无法更改的状态。

添加了更多信息

回答问题： 如果map 方法返回一个新的array 并且正在更改本地topic 变量，那么我没有更改以前的状态，那么问题出在哪里？正如我所看到的，incrementTopicRating 不会更改以前的状态并返回一个新状态。你能澄清一下吗？

在您的 reducer 代码中，map 方法确实返回了一个新的 array，但具有相同的 object 引用。

当react-redux 检查更改以定义组件SingleTopic 是否应该更新（重新渲染）时，它会对新道具与以前的道具进行浅层相等检查。由于旧数组和新数组都包含对相同对象的引用，因此对于旧数组和新数组中的所有对象比较，即使对于已修改评级的对象，浅等值也会返回 true。然后SingleTopic 组件不知道更改并且永远不会重新渲染。

更多信息可以在这里找到：http://rackt.org/redux/docs/Troubleshooting.html

还请查看 Connect 组件源代码，更具体地说，shouldComponentUpdate 方法确定是否应更新/重新渲染组件：https://github.com/rackt/react-redux/blob/04693ca0cabe021b27b62eb9240b51459ffe8c32/src/components/connect.js

Answer 2

我认为问题是因为你的减速器改变了项目：

 if (+topic.id === +action.id) {
      topic.rating -= 1;
      return topic;
 }

尝试创建一个新项目：

if (+topic.id === +action.id) {
      return { ...topic, rating: topic.rating - 1 }; 
}