反应/Redux 无法更新初始状态/未定义的问题

Question

我正在尝试更新我的状态并使其呈现。

下面我从 reducer.js 文件中调用我的状态并显示初始列表。

<div className={classes.resultborder}>
                {this.props.transInput.map(data => {
                    return (
                        <Inputs
                            key={data.id}
                            xParty={data.xParty}
                            zParty={data.zParty}
                            yAction={data.yAction}
                            amount={data.amount}
                            deleteItem={() => this.deleteItem(data.id)}/>
                    );
                })}
            </div>

在我的父应用程序的底部，我有

const mapStateToProps = state => {
    return {
        transInput: state.transactionInputs
    };
};
const mapDispatchToProps = dispatch => {
    return {
        submitResults: () => dispatch({type: 'SUBMIT', x: {
            xParty: 'Henry',
            yAction: 'Funds',
            zParty: 'Elizbath'
        }})
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(Transactions);

我已经对我的submitResults进行了硬编码，因为我还没有能够更新我的状态和显示，这是为了简单起见。

我在按钮中调用submitResults

submitResults={this.props.submitResults}

现在下面是我的整个减速机

const initialReducer = {
    transactionInputs: [
        {id: 1, xParty: "statePaul", yAction: "Funds", zParty: "stateSandra", amount: 100},
        {id: 2, xParty: "stateEmily", yAction: "Loans", zParty: "stateJohn", amount: 200},
        {id: 3, xParty: "stateMatt", yAction: "Repays", zParty: "stateMicheal", amount: 300},
    ],
    emptyInputs: false,
    toggle: false
};
const reducer = (state = initialReducer, action) => {
    console.log(initialReducer.transactionInputs);
    if(action.type === 'SUBMIT'){
        return{
            ...state,
            xParty: state.xParty.concat(action.x)
        }
    }
    return state;
};
export default reducer;

当我按 te 按钮运行submitResults时，我收到以下错误消息TypeError: Cannot read property 'concat' of undefined

我希望能够更新我的初始状态并显示它（目前我相信如果我可以让初始状态更新，那么显示将重新渲染正常）。

我不完全确定为什么这不起作用，但我相信它在我的化简器中.js文件有一些东西可以说明我如何返回我的状态。

我学徒任何建议。

Answer 1

在 reducer.js 文件中，在"SUBMIT"的操作类型下，我有以下代码：

 if(action.type === 'SUBMIT'){
        return{
            ...state,
            xParty: state.xParty.concat(action.x)
        }
    }
    return state;

但是我知道错误与...state,行有关，现在我有...state.transactionInputs,

if(action.type === 'SUBMIT'){
    return{
         ...state.transactionInputs,
         transactionInputs: state.transactionInputs.concat(action.x)
    };
}

旁注

当我试图找出问题所在时，我使用console.log(initialReducer.transactionInputs)来查看状态是否正在更新，但我确信这是我得到的是初始状态，而不是当前状态。所以对于控制台.log我应该使用 console.log(state.transactionInputs); ，我会更快地解决这个问题。

只是一个旁注:)