Question

我目前正在学习redux并尝试一些选择。一切看起来都没问题，直到我想更新对象数组中的一个状态。

我现在总共调度5个动作，前2个使用一个reducer设置一个状态的longitutde和纬度，然后我用其他reducer设置ID，最后当我想更新数组中的一个对象时我更新了一个，但以某种方式删除了另一个。

我的文件如下：

    const demoState = {
        renderedDrugs: [
            {
                id: '',
                drugId: '',
                price: undefined
            }
        ],
        apt: {
            latA: '',
            lonA: ''
        }
    }

    //SET_ID
    const setId = (id, drugId) => ({
        type: 'SET_ID',
        renderedDrugs: {
            id,
            drugId
        }
    })

    //SET_PRICE
    const setPrice = (drugId, price) => ({
        type: 'SET_PRICE',
        drugId,
        price
    })

    //RENDERED DRUGS REDUCER
    const renderedDrugsReducerDefState = [];

    const renderedDrugsReducer = (state = renderedDrugsReducerDefState, action) => {
        switch (action.type) {
            case 'SET_ID':
                return [
                ...state,
                action.renderedDrugs
                ]
            case 'SET_PRICE':
                return state.map((drug) => {
                    if (drug.drugId === action.drugId) {
                        return {
                            ...drug,
                            ...action.price
                        }
                    }
                })
            default:
                return state;
        }
    }


    //SET_LAT
    const setLat = (latA) => ({
        type: 'SET_LAT',
        latA
    })
    //SET_LON
    const setLon = (lonA) => ({
        type: 'SET_LON',
        lonA
    })

    //APT REDUER

    const aptReducerDefState = []

    const aptReducer = (state = aptReducerDefState, action) => {
        switch (action.type) {
            case 'SET_LAT':
                return {
                    ...state,
                    latA: action.latA
                }
            case 'SET_LON':
                return {
                    ...state,
                    lonA: action.lonA
                }
            default:
                return state;
        }
    }


    //STORE CREATION
    const store = createStore(
        combineReducers({
            renderedDrugs: renderedDrugsReducer,
            apt: aptReducer
        })
    )

    store.subscribe(() => {
        console.log('store', store.getState());
    })

    store.dispatch(setLat(88));
    store.dispatch(setLon(78));

    store.dispatch(setId(uuid(), 3));
    store.dispatch(setId(uuid(), 35));

    store.dispatch(setPrice(35, {price: 400}));

我认为SET_PRICE操作有问题，但是我尝试了各种配置并且无法找出问题，这就是为什么我发布了整个文件，如果那些不必要让我知道，我会删除不相关的位。

第4次发送后的控制台日志：

{renderedDrugs: Array(2), apt: {…}}
apt
:
{latA: 88, lonA: 78}
renderedDrugs
:
Array(2)
0
:
{id: "2a3c4bca-610a-4554-b7e3-695ae6e30ae7", drugId: 3}
1
:
{id: "48df057a-c8f1-4138-8db7-6268f7508ccb", drugId: 35}
length
:
2
__proto__
:
Array(0)
__proto__
:
Object

和aftr 5th

{renderedDrugs: Array(2), apt: {…}}
apt
:
{latA: 88, lonA: 78}
renderedDrugs
:
Array(2)
0
:
undefined
1
:
{id: "48df057a-c8f1-4138-8db7-6268f7508ccb", drugId: 35, price: 400}
length
:
2
__proto__
:
Array(0)
__proto__
:
Object

Answer 1

.map不会为您未更新的项目返回未更改的对象。添加一个返回应修复它：

return state.map((drug) => {
                if (drug.drugId === action.drugId) {
                    return {
                        ...drug,
                        ...action.price
                    }
                }
                return drug; // this was missing before, so the return was undefined
            })

覆盖对象数组而不是更新它

1 个答案: