reactjs - 传递给 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 的组件应该在状态更新时自动更新。有人可以解释一下我的错误在哪里吗？

reducer :

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方法中的状态。

这是您的 reducer 的更新代码:

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是否应该更新(重新渲染)时，它会对新的 props 和之前的 Prop 。由于旧数组和新数组都包含对相同对象的引用，因此对于旧数组和新数组中的所有对象比较，浅等于都会返回 true，即使对于评级已修改的数组也是如此。然后，SingleTopic 组件不会意识到更改，并且永远不会重新呈现。

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

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