我在反應中不斷收到 TypeScript 錯誤 2322

Question

我不斷收到 ts 錯誤

(Type 'string | { englishResults: {}; "": any; }' is not assignable to type 'ReactNode'.
  Type '{ englishResults: {}; "": any; }' is not assignable to type 'ReactNode'.
    Object literal may only specify known properties, and 'englishResults' does not exist in type 'ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal'.ts(2322))

從數據（對象）創建數組時，我從 localStorage 獲得。 我想使用Object.keys() function 從 object 創建一個數組。但是返回的數組不斷觸發上述錯誤。 我嘗試了不同的方法來解決問題，但無濟於事。 我卡住了。

這是代碼

const Admin = () => {
  const { adminId } = useParams();
  const navigate = useNavigate();

  const [results, setResults] = useState(false);
  const [studentEnglishResults, setStudentEnglishResults] = useState({});
  const [englishResults, setEnglishResults] = useState({});

  if (localStorage.length > 0) {
    setResults(true);
    setStudentEnglishResults(JSON.parse(
      localStorage.getItem("englishAnswers")!
    ));
    setEnglishResults(Object.keys(studentEnglishResults));
  }

  const adminUser = adminUsers.find(
    (adminUser) => adminUser.adminId === adminId
  );

  useEffect(() => {
    if (adminUser?.adminId !== adminId) {
      navigate("/");
    }
  }, []);

  const clearResult = () => {
    localStorage.clear();
  };

  const backToLogin = () => {
    navigate("/");
  };

  return (
    <>
      <div className="bg-gray-400 mx-auto w-3/4 p-3 mt-5">
        <p className="capitalize font-serif">
          <span className="font-bold">Admin</span>
        </p>
      </div>

      <div className="shadow-md shadow-gray-500 w-2/4 mx-auto p-5">
        <table className="table-auto border-collapse border w-full">
          <thead>
            <tr>
              <th className="text-left">Question</th>
              <th className="text-left">Answer</th>
            </tr>
          </thead>
          <tbody>
            //the error comes from this line
            { results ? {englishResults.map((item, index) => {
              return (
                <tr key={index}>
                  <td className="">{item}</td>
                  <td>{(studentEnglishResults as any)[item]}</td>
                </tr>
              );
            })} : ''}
          </tbody>
        </table>
      </div>
    </>
  );
};

export default Admin;

Answer 1

您可以在使用useState的同時分配類型。 例如，假設englishResults是一個字符串數組類型的數組，您可以這樣做：

const [studentEnglishResults, setStudentEnglishResults] = useState<string[]>([]);

同樣，假設studentEnglishResults是一個 object，其中字符串作為鍵，字符串作為值，您可以像這樣告訴 TypeScript：

const [studentEnglishResults, setStudentEnglishResults] = useState<{[key: string]: string}>();

或者為了使其更具可讀性，

type StudentEnglishResults = {
    [key: string]: string;
}

const Admin = () => {
    const [studentEnglishResults, setStudentEnglishResults] = useState<StudentEnglishResults>();
    ...
}

Answer 2

這將englishResults定義為 object：

const [englishResults, setEnglishResults] = useState({});

但是您嘗試通過調用map來像數組一樣使用它。 我看到您正在嘗試將 object 轉換為帶有Object.keys的數組，但您不能動態更改某些內容的類型在 Typescript 中，如果您這樣做，將會遇到很多類型錯誤。

這也是語法上不正確的代碼：

results ? {englishResults.map(...)} : ""

你不應該在這里使用大括號。