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

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

我不完全确定为什么这不起作用，但我确实认为它在我的reducer.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)来查看状态是否正在更新，但我认为这是我获得的是初始状态，而不是当前的状态。因此，对于console.log，我应该使用console.log(state.transactionInputs);，我会早点解决的。

仅需注意一点：）

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

1 个答案: