React，Redux，mapStateToProps，尽管状态发生了变化，但没有重新渲染

Question

我对Redux和React有一个奇怪的问题。 状态正确地更改并且在mapStateToProps我也获得了正确的新状态，但在映射之后组件将不会重新渲染。

这样，组件不会重新渲染：

import React, { Component } from 'react';
import { connect } from 'react-redux';

class ListItem extends Component {
    render() {
       return (<li>{this.props.item.text}</li>);
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        item: state.test.byID[ownProps.itemID]
    };
}

export default connect(mapStateToProps)(ListItem);

但是，如果我分割项目组件重新渲染：

import React, { Component } from 'react';
import { connect } from 'react-redux';

class ListItem extends Component {
    render() {
       return(<li>{this.props.text}</li>);
    }
}

const mapStateToProps = (state, ownProps) => {
    return {
        id: state.test.byID[ownProps.itemID].id,
        text: state.test.byID[ownProps.itemID].text
    };
}

export default connect(mapStateToProps)(ListItem);

我不知道为什么。

减速器：

const startState = {
    byID: {
        'a1': {id: 'a1', text: 'test1'},
        'a2': {id: 'a2', text: 'test2'},
        'a3': {id: 'a3', text: 'test3'},
        'a4': {id: 'a4', text: 'test4'},
        'a5': {id: 'a5', text: 'test5'},
        'a6': {id: 'a6', text: 'test6'},
        'a7': {id: 'a7', text: 'test7'},
    },
    all: ['a1', 'a2','a3', 'a4', 'a5', 'a6', 'a7']
};


export default function reducer(state = startState, action) {
    switch (action.type) {
        case 'ADD_TEXT':
            const newState = {...state};
            newState.byID[action.id].text = action.text;
            return newState
        default:
            return state;
    }
}

有任何想法吗？

Answer 1

假设您要更改其中一个byID数组对象中的text字段。 使用您的代码：

newState.byID[action.id].text = action.text;

您正在改变您的状态，因此React可能在识别更改时遇到问题，因为item prop中对象的引用不会更改，只会更改它的属性。 如果进行浅层检查，它就不会重新渲染，因为它“假设”对象根本没有变化。

在第二种情况下，您将返回字符串类型的prop text ，因此不会像对象那样进行浅层检查，并且相等的比较===将区分更改并正确地重新呈现组件。

有关更多说明，您可能需要查看React中的Immutability 。

通过传播运营商维护不变性的想法：

const newState = {...state};

可以用于顶级引用，但不适用于嵌套的子对象：

对象传播执行对象的浅表副本。 仅克隆对象本身，而不克隆嵌套实例。 JavaScript中对象休息/传播属性的简单指南

虽然变异对象似乎是您提供的代码中最容易出错的部分，但是Component React类可以深入调查对象更改（ PureComponent没有），并且问题可能与另一个问题有关。