與 TypeScript 反應：如何使用先前的狀態鍵入 useState 鈎子

Question

我有一個 React + TS 應用程序，我正在編寫一個自定義鈎子來更新表的標題。 基本上，我可以單擊不同的復選框並隱藏/顯示表格的特定列。

const useHeader = (headerConfiguration: TableHeader[]) => {
  const [header, setHeader] = useState(headerConfiguration);

  const updateHeader = (column: string) => {
     setHeader(prevState => {                       // <- this line has the error
       prevState.forEach(el => {
         if (el.name === column) el.visible = !el.visible;
       });
     });
  };

  return {
    header,
    updateHeader,
  };
};

export default useHeader;

如代碼所示，我需要根據column名更新visible屬性。

目前我有一個錯誤：

“(prevState: TableHeader[]) => void”類型的參數不可分配給“SetStateAction<TableHeader[]>”類型的參數。
類型 '(prevState: TableHeader[]) => void' 不能分配給類型 '(prevState: TableHeader[]) => TableHeader[]'。 類型“void”不可分配給類型“TableHeader[]”。

我明白錯誤的意思，但我不知道如何修復它，如果我使用庫 Immer 編寫相同的函數，它可以正常工作而沒有任何錯誤：

   setHeader(
     produce(header, draftHeader => {
       draftHeader.forEach(el => {
         if (el.name === column) {
           el.visible = !el.visible;
         }
       });
     }),
   );

我怎樣才能解決這個問題？

Answer 1

不使用 immer 時，您負責生成並返回一個新狀態。 因此，您需要創建它的副本，並應用您需要的更改，而不是操作prevState 。

例如，有這樣的事情：

const updateHeader = (column: string) => {
  setHeader(prevState => {
    // return a copy prevState
    return prevState.map(
      el => el.name === column
        ? {...el, visible: !el.visible} // copy inner item, if changed
        : el;
    );
  });
};

Answer 2

請試試這個：

const useHeader = (headerConfiguration: TableHeader[]) => {


const [header, setHeader] = useState(headerConfiguration);



const updateHeader = (column: string) => {
    header.forEach(el => {
      if (el.name === column) el.visible = !el.visible;
    });
    setHeader(header);
  };

  return {
    header,
    updateHeader,
  };
};

export default useHeader;