如何修復 React TypeScript 錯誤：'""' 類型的參數不可分配給 'SetStateAction 類型的參數<undefined> '</undefined>

Question

我正在開發一個從實時服務器中提取的 React 應用程序，我正在嘗試在本地運行它。 當我啟動它時，我收到此錯誤：

'""' 類型的參數不能分配給 'SetStateAction' 類型的參數。 TS2345

 75 | onClick={(): void => { 76 | if (regulatoryListActiveId === key) { 77 | setregulatoryListActiveId(""); | ^ 78 | } else { 79 | setregulatoryListActiveId(key); 80 | }

這是我的代碼：

/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import React, { useState } from "react";

const ChemicalRegulatoryListFilter = (props: any) => {
  const {
    chemicalRegulatoryList,
    setChemicalRegulatoryList,
    noOfRegulatoryListSelected,
    setNoOfRegulatoryListSelected,
    errorMessage,
    setErrorMessage,
    selectedValues,
    setSelectedValues,
    setIsSearchClicked,
  } = props;
  const [regulatoryListActiveId, setregulatoryListActiveId] = useState();

  const toggleRegulatoryListItem = (
    parentIndex: number,
    childIndex: number
  ) => {
    const regulatoryList = [...chemicalRegulatoryList];
    const isSelected =
      regulatoryList[parentIndex].subItems[childIndex].selected;
    if (!isSelected) {
      if (noOfRegulatoryListSelected === 10) {
        const error = { ...errorMessage, showMaxLimitMessage: true };
        setErrorMessage(error);
        return;
      }
      regulatoryList[parentIndex].selected = true;
      regulatoryList[parentIndex].noOfSelected += 1;
      setNoOfRegulatoryListSelected(noOfRegulatoryListSelected + 1);
      selectedValues.push({
        name: "regulatory",
        itemLabel: regulatoryList[parentIndex].itemLabel,
        itemValue: regulatoryList[parentIndex].itemValue,
        noOfSelected: regulatoryList[parentIndex].noOfSelected,
        parentIndex,
        childIndex,
        subItemsItemLabel:
          regulatoryList[parentIndex].subItems[childIndex].itemLabel,
        subItemsItemValue:
          regulatoryList[parentIndex].subItems[childIndex].itemValue,
      });
    } else {
      regulatoryList[parentIndex].noOfSelected -= 1;
      setNoOfRegulatoryListSelected(noOfRegulatoryListSelected - 1);
      const error = { ...errorMessage, showMaxLimitMessage: false };
      setErrorMessage(error);
      const newSelectedValues = selectedValues.filter((obj: any) => {
        return (
          obj.subItemsItemValue !==
          regulatoryList[parentIndex].subItems[childIndex].itemValue
        );
      });
      setSelectedValues(newSelectedValues);
    }
    regulatoryList[parentIndex].subItems[childIndex].selected = !isSelected;
    setChemicalRegulatoryList(regulatoryList);
  };

  if (chemicalRegulatoryList !== undefined) {
    return (
      <div className="chemical-toxicity-filter">
        <div className="title">REGULATORY LISTS</div>
        <ul className="filter">
          {chemicalRegulatoryList.map((item: any, key: number) => (
            <li
              key={`item-${key}`}
              className={`${
                regulatoryListActiveId !== key ? "collapsed" : ""
              } ${item.noOfSelected > 0 ? "selected" : ""}`}
              onClick={(): void => {
                if (regulatoryListActiveId === key) {
                  setregulatoryListActiveId("");
                } else {
                  setregulatoryListActiveId(key);
                }
              }}
            >
              {item.itemLabel}
              <ul>
                {item.subItems.map((subItem: any, innerKey: number) => (
                  <li
                    key={`item-${innerKey}`}
                    className={`${subItem.selected ? "selected" : ""}`}
                    onClick={(e): void => {
                      setIsSearchClicked(false);
                      e.stopPropagation();
                      toggleRegulatoryListItem(key, innerKey);
                    }}
                  >
                    {subItem.itemLabel}
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>
      </div>
    );
  }
  return <></>;
};
export default ChemicalRegulatoryListFilter;

在閱讀了有關 stackoverflow 的類似問題后，我嘗試更改此內容：
const [regulatoryListActiveId, setregulatoryListActiveId] = useState();
對此：
const [regulatoryListActiveId, setregulatoryListActiveId] = useState<string>(); 這似乎解決了最初的錯誤，但隨后發生了這個錯誤：

此條件將始終返回 'true'，因為類型 'string | undefined' 和 'number' 沒有重疊。 TS2367

 72 | key={`item-${key}`} 73 | className={`${ 74 | regulatoryListActiveId?== key: "collapsed". "" | ^ 75 | } ${item?noOfSelected > 0: "selected": ""}`} 76 | onClick={(): void => { 77 | if (regulatoryListActiveId === key) {

有誰知道如何解決這個問題？ 謝謝！

Answer 1

看起來您希望 state 值為number ，因為您正在執行以下操作：

setregulatoryListActiveId(key);

key是被迭代的元素的索引。

在類型中包含undefined也可能會引起一些不必要的混淆 - 如果我是你，我會將定義更改為：

const [regulatoryListActiveId, setregulatoryListActiveId] = useState(-1);

和改變

setregulatoryListActiveId("");

至

setregulatoryListActiveId(-1);

清除它（因為沒有數組索引等於-1）。