arrays - react Redux : View not getting updated even though mapStateToProps is

Question

我的应用程序和商店

将 Redux 与 ReactJS 结合使用，我在存储中保存一个对象数组(称为结果)，并分派(dispatch)对其进行排序和操作的操作。在 mapStateToProps 中，我返回此结果数组，该数组将结果呈现在 View 上的列表中。

// in Component file
export default class ResultList extends Component {
    constructor(props) {
        super(props);
        this.renderResults = this.renderResults.bind(this);
    }

    renderResults(results) {
        return (
            results.map((result) => {
                return <AnotherComponent />
            })
        );
    }

    render() {
        const { results } = this.props;
        return (
            <div>
                <ul>
                    {this.renderResults(results)}
                </ul>
            </div>
        )

// in Container Component file
const mapStateToProps = (state, ownProps) => {
    console.log('map state is triggered');
    return {
        results: state.results
    };
}

问题

我发现虽然我的mapStateToProps成功触发更新我的类组件的 Prop ，由于某种原因 View 仅在第一次操作结果数组时更新，但是不会更新商店的 future 更新。 (请参阅下面的更新。这并不完全准确。)

我已经确保这个问题不是由于我的 reducer 中的突变状态造成的，而这种情况经常发生；我已经确认，每次商店更新时，mapStateToProps都会运行(如console.log所示)。问题似乎出在从 mapStateToProps 返回的结果 props 和实际渲染结果数组的 View 之间，但我无法看到 Redux 在幕后正在做什么。

其他人遇到的与我遇到的最接近的问题似乎是这个，但我不知道此修复如何或是否适用于我对存储数组的使用:https://forums.meteor.com/t/the-state-is-correctly-mutated-and-returned-but-view-does-not-rerender/28840/5

任何帮助将不胜感激。谢谢。

<小时/>

更新

我深表歉意，但必须更正我上面的陈述，即商店中的结果第一次更新后 View 不再有更新。经过进一步测试，我发现这并不完全正确。 仅当结果数组根据以下排序函数的情况 1 排序时， View 才会更新。情况 2 和情况 3 不会导致 View 更新。这可能/可能不是必需的信息，但结果数组会在 onClick 循环中按以下顺序按这 3 种情况排序:情况 1 、情况3、情况2。

// in reducer index.js file
case SORT_RESULTS:
    return {
        ...state,
        results: sortArr(state.results, state.sortType)
    };

// sorting function
function sortArr(arr, sortType) {
    let newArr = [];
    switch (sortType) {
        case '1':
            for (let i = arr.length - 1; i >= 0; i--) {
                newArr.push(arr[i]);
            }
            return newArr;
        case '2':
            newArr = arr;
            newArr.sort((a, b) => {
                return b.num - a.num;
            });
            return newArr;
        case '3':
            newArr = arr;
            newArr.sort((a, b) => {
                let id1 = a.id.toLowerCase();
                let id2 = b.id.toLowerCase();
                if (id1 < id2) {
                    return -1;
                }
                if (id1 > id2) {
                    return 1;
                }
                return 0;
            });
            return newArr;
        default:
            return arr;
    }
}

Answer 1

解决方案

罪魁祸首是:newArr = arr。将其更改为 newArr = arr.slice()， View 将在每次排序时更新。

可能的根本原因

至于为什么这个解决方案有效，我邀请其他人发表看法。以下是我的想法:

根据https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice :

"The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included)."

使用newArr = arr复制结果数组似乎只复制指针(到数组)，这实际上只是内存中的引用。如果这个语句是true，那么 Redux 根本不会认为状态已更改，因为它正在比较完全相同的指针(state.results)，即使通过排序确认数组本身的实际数据发生更改。通过 slice() 复制一个全新的数组将涉及新的指针和数据，这将被检测为底层 Redux 的更改。