Question

组件未在状态更新时呈现，即使mapStateToProps正在成功执行。

组件：

import React from 'react';
import AddItem from './addItemComponent';
import { connect } from 'react-redux';
import RenderItem from './RenderItem';

class HomeComponent extends React.Component {

    constructor(props) {
        super(props);

    }
    render() {

        return (
            <div>

                <div className="container">
                    <AddItem />
                </div>

                <div className="container">
                    {this.props.Items.length}
                </div>


            </div>
        );
    }
}

function mapStateToProps(state) {

    return {
        Items: state.auth.items

    }

}
export default connect(mapStateToProps)(HomeComponent);

减速：

      const ItemsReducers = (state = {}, Action) => {
        if (!state.items)
            state.items = [];

        console.log("inside the reducers", state);
        var newState = Object.assign({}, state);

        switch (Action.type) {
            case 'AddItem':

                newState.items.push(Action.payload);

                return newState;
                break;

            default:
                return newState;
                break;

        }
        return newState;
    }

export default ItemsReducers;

为了避免变异，我只是克隆对象并进行推送操作。但仍面临问题。如果我得到任何帮助会更有帮助。

Answer 1

Object.assign（）创建对象的浅表副本，而不是深层副本。所以，你有一个变异！

在您的示例中，mapStateToProps正在执行，因为state已更改，但items保留相同的引用。因此，即使数组的长度发生了变化，您的旧items也等于新的items。如果输出没有改变，mapStateToProps不会重新渲染组件。

你需要复制你的州和这样的项目：

var newState = Object.assign({}, state);
newStats.items = newState.items.slice();

但这不是使用redux的好方法。

我建议使用immutability-helper包和update（）。它创建对象的副本而不更改原始源

import update from 'immutability-helper';

const reducer = (state = {}, action) => {

    switch (action.type) {

        case: 'addItem': 
            return !state.items
                ? update(state, {items: {$set: [action.payload]}})
                : update(state, {items: {$push: [action.payload]}})

        default:
            return state;
    }
}

组件不会在状态更新时重新呈现

1 个答案: