как добавить массив объектов в текущее состояние в реагирующем функциональном компоненте

Question

это мое состояние

const [dataItem, setDataItem] = useState({
    id: null,
    code: null,
    title: null,
    prent: null,
    unitId: null,
});

, и я хочу добавить файл в состояние dataItem

let file = [
    {
        uid: '1',
        name: items.file,
        status: 'done',
    },
];
setDataItem({ ...dataItem, file });

, но вместо добавления к dataItem он заменяет другие элементы (например, id, код, заголовок) будет нулевым состоянием dataItem после добавления файла

{
    "id": null,
    "code": null,
    "title": null,
    "prent": null,
    "unitId": null,
    "file":[{
        "uid": "1",
        "name": "u104.svg",
        "status": "done"
    }]
}

Answer 1

Чтобы добавить file, сохранив предыдущее состояние без изменений, вам необходимо использовать функциональные обновления.

let file = [
  {
    uid: '1',
    name: items.file,
    status: 'done',
  },
];
setDataItem(prevState => ({ ...prevState, file }));

Answer 2

Поскольку состояние было инициализировано object вместо array. Это должно быть

const [dataItem, setDataItem] = useState([{
    id: null,
    code: null,
    title: null,
    prent: null,
    unitId: null,
}]);

При обновлении dataItem вы должны распределить массив file слишком

setDataItem({ ...dataItem, ...file });

---

Подробнее => Правильная модификация массивов состояний в ReactJS