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

Question

在下面的代码中，如果我只 return 来自 mapStateToProps 的 topic 对象，状态更新时不会重新渲染 SingleTopic 组件。但是如果我 return { 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 如果我向 returned 对象添加第二个属性，则会呈现 SingleTopic 组件。而这个属性必须是数组或者对象类型，像这样：

let foo = [];

return { topic, foo };

Answer 1

我认为问题是因为你的 reducers 改变了项目：

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

尝试创建一个新项目：

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

Answer 2

您正在改变减速器 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 方法 return 是一个新的 array 并且正在更改本地 topic 变量那么我没有更改以前的状态，那么在哪里问题？正如我所见，incrementTopicRating 不会改变以前的状态，return 是一个新状态。你能澄清一下吗？

在您的减速器代码中，map 方法执行 return 一个新的 array 但具有相同的 object 引用。

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

可在此处找到更多信息：http://rackt.org/redux/docs/Troubleshooting.html

另请查看 Connect 组件源代码，更具体地说是 shouldComponentUpdate 确定组件是否应为 updated/re-rendered 的方法：https://github.com/rackt/react-redux/blob/04693ca0cabe021b27b62eb9240b51459ffe8c32/src/components/connect.js

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

A component passed into connect() is not rendered

reactjs

redux