javascript 我在react中不断收到TypeScript错误2322

ctrmrzij 于 2023-01-11 发布在 Java

关注(0)|答案(2)|浏览(181)

我一直收到错误信息

(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()函数从对象创建数组。但返回的数组不断触发上述错误。我尝试了不同的方法来解决该问题，但没有效果。我卡住了。
下面是代码

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;

JavaScript

来源：https://stackoverflow.com/questions/75060831/i-keep-getting-typescript-error-2322-in-react

2条答案

按热度按时间

wgeznvg71#

可以在使用useState的同时指定类型。例如，假设englishResults是类型为string array的数组，则可以执行以下操作：

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

类似地，假设studentEnglishResults是一个以字符串作为键、以字符串作为值的对象，您可以将其告知TypeScript，如下所示：

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

或者使其更可读，

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

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

赞(0）回复(0）举报 2023-01-11

yiytaume2#

这将englishResults定义为一个对象：

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

但是你试图像数组一样使用它，通过在它上面调用map，我看到你试图用Object.keys把对象转换成数组，但是你不能动态地改变某个东西的类型，如果你这样做的话，你会得到很多类型错误。
这也是语法不正确的代码：

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

此处不应使用大括号。

赞(0）回复(0）举报 2023-01-11

我来回答

javascript 我在react中不断收到TypeScript错误2322

2条答案

相关问题

热门标签

最新问答