如何防止 javascript object 被转换为长度为 1 的对象数组？

Question

I'm working on my first solo ReactJS/Redux project and things were going well until I got to a point where I'm using an object in the Redux store that is always supposed to be a single object. When I copy the object from one part of the store (one element of the sources key) to another (the selectedItems key) that object is being stored as an array of length 1, which isn't the data I'm passing in (it's just a single object). I could live with this and just read out of that store variable as an array and just use element 0 except that when I call another method in the reducer to replace that variable in the store, that method stores the new data as a single object. My preference would be to have everything store a single object but I can't figure out how to do that, Anyway: here's some of the reducer code:

const initialState = {
    sources: [
        {
            id: 1,
            mfg: 'GE',
            system: 'Smart bed',
            model: '01',
            name: 'GE smart bed'
        },
        {
            id: 2,
            mfg: 'IBM',
            system: 'Patient monitor',
            model: '03',
            name: 'IBM patient monitor'
        }
    ],
    error: null,
    loading: false,
    purchased: false,
    selectedItem: {}
};

// This is called when a user selects one of sources in the UI
// the Id of the selected sources object is passed in as action.id
// This method creates an array in state.selectedItem 
const alertSourceSelect = ( state, action ) => {
    let selectedItem = state.sources.filter(function (item) {
        return item.id === action.id;
    });

    if (!selectedItem) selectedItem = {};
    return {...state, selectedItem: selectedItem};
};

// When someone edits the selected source, this takes the field name and new value to 
// replace in the selected source object and does so. Those values are stored in 
// action.field and action.value . However, when the selected source object is updated
// it is updated as a single object and not as an array.
const selectedSourceEdit = ( state, action ) => {
    return {
        ...state,
        selectedItem: updateObject(state.selectedItem[0], { [action.field] : action.value })
    };
};

const reducer = (state = initialState, action) =>  {
        switch (action.type) {
        case actionTypes.ALERT_SOURCE_SELECT: return alertSourceSelect( state, action );
        case actionTypes.ALERT_SELECTED_SOURCE_EDIT: return selectedSourceEdit( state, action );
        default: return state;
    }

Here is the updateObject method (sorry I left it out):

export const updateObject = (oldObject, updatedProperties) => {
    return {
        ...oldObject,
        ...updatedProperties
    }
};

Answer 1

Issue: updateObject is returning object and not array,and you are maintaining selectedItem as an array not object

export const updateObject = (oldObject, updatedProperties) => {
    return {
        ...oldObject,
        ...updatedProperties
    }
};

---

Solution:

Either return array from updateObject :

export const updateObject = (oldObject, updatedProperties) => {
    return [{
        ...oldObject,
        ...updatedProperties
    }]
};

OR make array of returned object

const selectedSourceEdit = ( state, action ) => {
    return {
        ...state,
        selectedItem: [updateObject(state.selectedItem[0], { [action.field] : action.value })]
    };
};