Arrays Redux分派-从数组中删除项/数组长度输出不正确

我在Redux中有一个操作，它所做的一切就是删除硬编码数组中的最后一个项目，该数组包含3个项目

它工作正常，但我有第二个属性（dataLength），它计算数组的长度。在分派操作时，我希望从数组中删除最后一项，同时更新数组长度

所发生的事情是，该项从数组中删除，但长度（dataLength）在我再次分派该操作之前不会更新

所以我有两个问题：

我的dataLength属性设置为null，是否可以在初始状态下获取数组的长度

如何在第一次分派后立即更新dataLength属性

谢谢

减速器

const initialState = {
    data: [
        {
            id: 0,
            title: 'title 1'
        },
        {
            id: 1,
            title: 'title 2'
        },
        {
            id: 2,
            title: 'title 3'
        }
    ],
    dataLength: null
}

const data = (state = initialState, action) => {
    switch(action.type) {
        case 'DECREMENT_DATA':
            return { ...state, data: state.data.filter((item) => item.id !== action.id), dataLength: state.data.length }
        default:
            return state;
    }
}

export default data;

行动

export function decrement() {
    return {
        type: 'DECREMENT_DATA',
        id: 2
    }
}

组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { decrement } from '../actions/decrement';

class Decrement extends Component {
    render() {
        return (
            <button onClick={this.props.decrement}>Decrement -</button>
        );
    }
}

const mapStateToProps = ((state) => {
    return {
        data: state.data
    }
});

const mapDispatchToProps = ((dispatch) => {
    return bindActionCreators({
        decrement
    }, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(Decrement);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“../actions/decrement”导入{decrement}；
类减量扩展组件{
render（）{
返回(
减量-
);
}
}
常量mapStateToProps=（（状态）=>{
返回{
数据：state.data
}
});
const mapDispatchToProps=（（调度）=>{
返回bindActionCreators({
减量
}，调度）
});
导出默认连接（mapStateToProps、mapDispatchToProps）（递减）；

在减速机中，您没有正确更新长度，因为它是根据当前状态列表而不是筛选列表确定的

const data = (state = initialState, action) => {
    switch(action.type) {
        case 'DECREMENT_DATA':
            const newList = state.data.filter((item) => item.id !== action.id)
            return { ...state, data: newList, dataLength: newList.length }
        default:
            return state;
    }
}

---

您应将此邮件退回：

case 'DECREMENT_DATA':   
    const updatedArray= state.data.filter((item) => item.id !== action.id)   
    return { ...state, data:updatedArray , dataLength: updatedArray.length }

---

原因是当您使用state.data.length时，您仍在访问旧的状态值

很高兴能提供帮助：-）