在利用useState做数据利用更新的时间，有一些复杂数据范例，一个对象数组里包罗，函数，dom等等复杂数据范例，想要举行数据更新，而且视图更新的环境下，因useState的特性就必须举行深拷贝赋值。
方式
1、JSON.stringify共同JSON.parse 这个有限定，我们的数据范例包罗，函数。它会丢失
2、Lodash 里的深拷贝方法
3、递归实现
我这里通过递归直接写的方法，发现拷贝是可以了，但是无法生存之前dom上的视图状态看，查阅文档如下
React Hooks 是 React 的一种新特性，它提供了一种更加方便和轻便的方式来编写组件。React Hooks 中的 state 和 props 都是可变的，当组件的状态或属性发生改变时，React 会重新渲染组件。在举行深拷贝时，只是将组件的 state 或 props 对象中的值复制到了一个新的对象中，新的对象和原来的对象是完全独立的，它们的引用关系已经被断开。而 React 在举行组件渲染时，是根据组件的 state 和 props 来盘算出组件的视图状态的，当组件的 state 或 props 发生改变时，React 会重新盘算组件的视图状态，并重新渲染组件。
因此，如果在举行深拷贝后，将新的对象作为组件的 state 或 props，那么组件的视图状态就会丢失，由于 React 以为组件的状态或属性并没有发生改变，以是不会重新盘算组件的视图状态。要生存组件的视图状态，须要确保深拷贝后的对象和原来的对象具有雷同的引用关系，大概利用其他方法来举行状态管理，例如利用 React Context 或 Redux 等状态管理库。
办理
我这里是找了一个npm包来处理惩罚了
起首，我们须要安装一个不可变数据布局库，这里我选择利用Immer。您可以利用以下下令举行安装：
npm install immer然后，我们可以利用Immer来创建一个新的状态对象，而不必担心丢失与原始状态干系联的视图状态。下面是一个示例：
如图：
代码：
import React, { useState } from 'react';import produce from 'immer';function MyComponent() { const [data, setData] = useState({ name: 'John', age: 30, address: { city: 'New York', country: 'USA' } }); const handleButtonClick = () => { const newData = produce(data, draftData => { draftData.age = 31; draftData.address.city = 'Los Angeles'; }); setData(newData); }; return ( <div> <p>Name: {data.name}</p> <p>Age: {data.age}</p> <p>City: {data.address.city}</p> <p>Country: {data.address.country}</p> <button onClick={handleButtonClick}>Update</button> </div> );}在上面的示例中，我们利用了Immer的produce方法来创建一个新的状态对象newData，并在此中更新了age和address.city属性。然后，我们利用setData方法将新的状态对象设置为组件的状态。由于我们利用了不可变数据布局，与原始状态干系联的视图状态将不会丢失。
请留意，我们在handleButtonClick方法中利用了produce方法来创建新的状态对象。produce方法将原始状态对象data作为第一个参数，并继承一个回调函数作为第二个参数。在回调函数中，我们可以利用类似于修改原始状态对象的方式来修改draftData对象，但实际上我们是在修改新的状态对象。末了，produce方法将返回一个新的状态对象newData，该对象包罗全部更改。
我这里试过是ok的 |
