React-Redux ，状态未正确更新

Question

我有一个小型发票应用程序，它应该在列表中显示发票，并且还能够添加新/编辑旧发票。

状态由redux 管理，绑定由React-redux 完成。

在我尝试用我的表单值调用 useDispatch 钩子之前，一切都很好。它派出 正确的值，但是在到达减速器的途中，行数组中的所有数据都消失了。全部 其他数据被正确分派。

我的表单值被发送到 reducer：

dispatch(newInvoice({
           "id": 4,
           "name": " xvsvsd",
           "street": "vsdvs",
           "zip": "sdfss",
           "city": "sefsd",
           "due_date": "2020-07-01",
           "rows": [
             {
               "quantity": 5,
               "currency": "eur",
               "unit_price": 3,
               "unit_of_measurement": "kpl",
               "vat": 4,
               "name": "test",
           },
           {
               "quantity": 4,
               "currency": "eur",
               "unit_price": 3,
               "unit_of_measurement": "kpl",
               "vat": 4,
               "name": "test1",

           }]
           
         }))

我的行动

export const newInvoice = (props) => {
    console.log(props)

    return {
        type: 'ADD_NEW',
        data: {
            
            id: props.id,
            name: props.name,
            street: props.street,
            zip: props.zip,
            city: props.city,
            due_date: props.due_date,
            rows: [
                {
                    quantity: props.rows.quantity,
                    currency: props.rows.currency,
                    unit_price: props.rows.unit_price,
                    unit_of_measurement: props.rows.unit_of_measurement,
                    vat: props.rows.vat,
                    name: props.rows.name,
                },
            ]
        }
    }
}

我的减速器

const invoiceReducer = (state = initialState, action) => {
    switch(action.type) {
        case 'ADD_NEW':
            console.log(state)
            console.log(action.data)
            return [...state, action.data  ]
    
      default:
        return state
    }
}

编辑 你问的是initialState，是这样的：

[
    {
        "id": 1,
        "name": "Test company",
        "street": "Testikatu 1",
        "zip": "00100",
        "city": "Helsinki",
        "due_date": "2020-08-01",
        "rows": [
            {
                "quantity": 3,
                "currency": "EUR",
                "unit_price": 1.24,
                "unit_of_measurement": "kpl",
                "vat": 24,
                "name": "Sample invoice row 1"
            },
            {
                "quantity": -1,
                "currency": "EUR",
                "unit_price": 2.48,
                "unit_of_measurement": "kpl",
                "vat": 24,
                "name": "Sample invoice row 2"
            }
        ]
    },
    {
        "id": 2,
        "name": "Another test company",
        "street": "Testikatu 3",
        "zip": "00100",
        "city": "Helsinki",
        "due_date": "2020-08-05",
        "rows": [
            {
                "quantity": 1,
                "currency": "EUR",
                "unit_price": 150,
                "unit_of_measurement": null,
                "vat": 0,
                "name": "Sample row"
            }
        ]
    }
]

当我 console.log action.data 它在行数组的所有字段上显示未定义。

非常感谢。

Answer 1

尝试像这样修改您的操作

export const newInvoice = (props) => {
console.log(props)

return {
    type: 'ADD_NEW',
    data: {
        
        id: props.id,
        name: props.name,
        street: props.street,
        zip: props.zip,
        city: props.city,
        due_date: props.due_date,
        rows: props.rows.map(row => ({...row})
    }
}
}

因为您的行是一个数组，所以如果您尝试直接访问没有索引的行，它将给出未定义