Question

在下面的代码中，如果我只从topic返回mapStateToProps对象，则状态更新时不会重新呈现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方法改变状态。

以下是您的救援人员的更新代码：

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

我认为这个问题是因为你的reducer改变了这些项目而引起的：

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

尝试改为创建新项目：

public static void RepeatForEach(this Action<T> action, IEnumerable<T> itens)
{
    foreach (T t in x)
    {
        a.Invoke(t);
    }
}

传递给connect（）的组件不会被渲染

2 个答案: