問(wèn)題

在使用useState做數(shù)據(jù)操作更新的時(shí)候，有一些復(fù)雜數(shù)據(jù)類型，一個(gè)對(duì)象數(shù)組里包含，函數(shù)，dom等等復(fù)雜數(shù)據(jù)類型，想要進(jìn)行數(shù)據(jù)更新，并且視圖更新的情況下，因useState的特性就必須進(jìn)行深拷貝賦值。

方式

1、JSON.stringify配合JSON.parse 這個(gè)有限制，我們的數(shù)據(jù)類型包含，函數(shù)。它會(huì)丟失

2、Lodash 里的深拷貝方法

3、遞歸實(shí)現(xiàn)

我這里通過(guò)遞歸直接寫的方法，發(fā)現(xiàn)拷貝是可以了，但是無(wú)法保留之前dom上的視圖狀態(tài)看，查閱文檔如下

React Hooks 是 React 的一種新特性，它提供了一種更加方便和簡(jiǎn)潔的方式來(lái)編寫組件。React Hooks 中的 state 和 props 都是可變的，當(dāng)組件的狀態(tài)或?qū)傩园l(fā)生改變時(shí)，React 會(huì)重新渲染組件。在進(jìn)行深拷貝時(shí)，只是將組件的 state 或 props 對(duì)象中的值復(fù)制到了一個(gè)新的對(duì)象中，新的對(duì)象和原來(lái)的對(duì)象是完全獨(dú)立的，它們的引用關(guān)系已經(jīng)被斷開(kāi)。而 React 在進(jìn)行組件渲染時(shí)，是根據(jù)組件的 state 和 props 來(lái)計(jì)算出組件的視圖狀態(tài)的，當(dāng)組件的 state 或 props 發(fā)生改變時(shí)，React 會(huì)重新計(jì)算組件的視圖狀態(tài)，并重新渲染組件。

因此，如果在進(jìn)行深拷貝后，將新的對(duì)象作為組件的 state 或 props，那么組件的視圖狀態(tài)就會(huì)丟失，因?yàn)?React 認(rèn)為組件的狀態(tài)或?qū)傩圆](méi)有發(fā)生改變，所以不會(huì)重新計(jì)算組件的視圖狀態(tài)。要保留組件的視圖狀態(tài)，需要確保深拷貝后的對(duì)象和原來(lái)的對(duì)象具有相同的引用關(guān)系，或者使用其他方法來(lái)進(jìn)行狀態(tài)管理，例如使用 React Context 或 Redux 等狀態(tài)管理庫(kù)。

解決

我這里是找了一個(gè)npm包來(lái)處理了

首先，我們需要安裝一個(gè)不可變數(shù)據(jù)結(jié)構(gòu)庫(kù)，這里我選擇使用Immer。您可以使用以下命令進(jìn)行安裝：

npm install immer

然后，我們可以使用Immer來(lái)創(chuàng)建一個(gè)新的狀態(tài)對(duì)象，而不必?fù)?dān)心丟失與原始狀態(tài)相關(guān)聯(lián)的視圖狀態(tài)。下面是一個(gè)示例：

代碼

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方法來(lái)創(chuàng)建一個(gè)新的狀態(tài)對(duì)象newData，并在其中更新了age和address.city屬性。然后，我們使用setData方法將新的狀態(tài)對(duì)象設(shè)置為組件的狀態(tài)。由于我們使用了不可變數(shù)據(jù)結(jié)構(gòu)，與原始狀態(tài)相關(guān)聯(lián)的視圖狀態(tài)將不會(huì)丟失。

請(qǐng)注意，我們?cè)趆andleButtonClick方法中使用了produce方法來(lái)創(chuàng)建新的狀態(tài)對(duì)象。produce方法將原始狀態(tài)對(duì)象data作為第一個(gè)參數(shù)，并接受一個(gè)回調(diào)函數(shù)作為第二個(gè)參數(shù)。在回調(diào)函數(shù)中，我們可以使用類似于修改原始狀態(tài)對(duì)象的方式來(lái)修改draftData對(duì)象，但實(shí)際上我們是在修改新的狀態(tài)對(duì)象。最后，produce方法將返回一個(gè)新的狀態(tài)對(duì)象newData，該對(duì)象包含所有更改。

我這里試過(guò)是ok的

以上就是react hooks深拷貝后無(wú)法保留視圖狀態(tài)解決方法的詳細(xì)內(nèi)容，更多關(guān)于react hooks深拷貝視圖狀態(tài)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論