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，code，title）将为null 附加文件后的dataItem状态

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

Answer 1

因为状态已初始化为object而不是array。应该是

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

更新dataItem时，您也必须扩展数组file

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

了解更多=> Correct modification of state arrays in ReactJS

Answer 2

要附加file来保持先前的状态不变，则需要使用功能更新。

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

如何在React功能组件中将对象数组附加到当前状态

2 个答案: