请耐心听我说,这个问题与我第一个使用React、Redux或React-Redux的测试应用程序有关.Docs已经让我走得很远了,我有一个模拟银行应用程序,基本上可以正常工作.我的状态对象大致如下:

{
 activePageId: "checking",
 accounts: [
  checking: {
    balance: 123,
    transactions: [
      {date, amount, description, balance}
    ]
  }
 ]
}

我只有两个动作:

1. CHANGE_散列(如url散列).此操作始终按预期工作,reducer所做的只是更新状态.activePageId(是的,我正在克隆状态对象,而不是修改它).操作完成后,我可以看到Reduxstore 中的状态发生了变化,我可以看到React已经更新.

function changeHash(id) {
        return {
            type: "CHANGE_HASH",
            id: id
        }
}

2.添加交易(表格提交).此操作从不更新React,但始终会更新Reduxstore .此操作的reducer正在更新state.accounts[0].balance,并将事务对象添加到数组state.accounts[0]中.交易.我没有收到任何错误,只是没有更新.但是,如果我发送CHANGE_HASH action React,它将正确地捕捉并显示所有ADD_TRANSACTION状态更新.

function addTransaction(transaction, balance, account) {
    return {
        type: "ADD_TRANSACTION",
        payload: {
            transaction: transaction,
            balance: balance,
            account: account
        }
    }
}

我的减速机...

    function bankApp(state, action) {
        switch(action.type) {
            case "CHANGE_HASH":
                return Object.assign({}, state, {
                    activePageId: action.id
                });
            case "ADD_TRANSACTION":
            // get a ref to the account
                for (var i = 0; i < state.accounts.length; i++) {
                    if (state.accounts[i].name == action.payload.account) {
                        var accountIndex = i;
                        break;
                    }
                }

            // is something wrong?
                if (accountIndex == undefined)  {
                    console.error("could not determine account for transaction");
                    return state;
                }

            // clone the state
                var newState = Object.assign({}, state);

            // add the new transaction
                newState.accounts[accountIndex].transactions.unshift(action.payload.transaction);

            // update account balance
                newState.accounts[accountIndex].balance = action.payload.balance;

                return newState;
            default:
                return state;
        }

我的MapStateTrops

    function select(state) {
        return state;
    }

我错过了什么?我的印象是React应该随着Redux store的更新而更新.

Github repo:

Deployment bank demo

p、 我撒谎说没有任何错误.我有很多警告

""警告:数组或迭代器中的每个子级都应该有一个唯一的"键"属性..."

我已经给了他们一个索引键prop.不过,我怀疑这与我的问题有关.

推荐答案

问题在于这段代码:

// clone the state
var newState = Object.assign({}, state);         

// add the new transaction

newState.accounts[accountIndex].transactions.unshift(action.payload.transaction);

// update account balance
newState.accounts[accountIndex].balance = action.payload.balance;

克隆状态对象并不意味着可以改变它所指的对象.我建议你多读一些关于不变性的书,因为它不是这样工作的.

Redux"疑难解答"文档中详细描述了这个问题及其解决方案,因此我建议您阅读它们.

https://redux.js.org/troubleshooting

我还建议您在Flux Comparison for Redux中看一看购物卡示例,因为它展示了如何更新嵌套对象,而不会像您所要求的那样对它们进行变异.

https://github.com/voronianski/flux-comparison/tree/master/redux

Reactjs相关问答推荐

Reaction路由的问题-在Effect使用API调用响应设置状态之前呈现页面

在transformResponse中使用来自其他查询的缓存

页面永远加载API/从数据库获取数据

在构建或部署Reaction应用程序时出错

React-React中是否完全支持基于类的组件?

点击页脚链接时,如何更改ReactJS导航栏中的活动菜单项(样式为Tailwind CSS)?

React useEffect 问题...异步函数内的变量正在获取延迟的更新值

如何删除 bootstrap 手风琴上的边框

如何使用服务器中的数据自动填充表单字段?

useEffect 内的 onClick 和 addEventListener 之间的 click 事件顺序差异

React-router-dom的链接不改变路由(ReactRouter6)

画布:用鼠标绘制形状时重新绘制整个画布会导致卡顿

i18next中复数键的理解

使用reactrouterdom时显示"对象无效作为React子组件"错误

React 测试库包装器组件

意外的标记.您可能需要一个合适的加载器来处理这种文件类型.书?.img? /*#__PURE__*/React.createElement("img",

react 本机日历

如何在 MUI 数据网格中的 renderCell 组件之间传递状态

react 路由dom没有路由匹配位置错误/在路由中制作组件

我可以在类组件中使用 useState 挂钩吗?