类型记录useState反应钩子解构错误(不返回数组？)
我第一次使用了一个简单的React应用程序，并希望建立一个简单的MVC来连接ASP.NET后端，所有这些都是在VisualStudio2019中完成的(这给React带来了一些麻烦)。然而，既然我正在尝试实现模型，我发现所有关于强烈键入useState钩子的建议都不适合我。
根据一些教程(如这一个或这一个 )，它应该像在括号中添加一个类型一样简单，比如const [state, setState] = useState<Type>({})，因为它有一个通用的实现。不幸的是，对我来说，这会引发错误"Uncaught TypeError:无效的尝试去构造不可迭代的实例.“。
这个线程这里建议通过将[]改为{}从数组切换到对象，但是这使得我传递的两个参数没有定义，因此我没有状态或更新所述状态的方法。
我沿着读取的道路走下去，直到我对数组破坏有了一个简单的理解，所以我理解这个想法是传递一个具有两个常量的数组，这些常量将按顺序分配由useState钩子返回的数组元素。因此，我尝试手动销毁数组，分别设置常量useState[0]和useState[1]。当我尝试寻找一个未输入的钩子时，它就像预期的一样工作。当我尝试使用这个类型化钩子时，我发现了一些关于没有元素的错误，在打印对象时，没有找到一个类似于非类型化钩子的数组，而是一个布尔值。似乎类型化的useState正在返回值"false“，而不是数组。
在这一点上，我最好的猜测是，我有一些不实现类型化useState的依赖项，但我在故障排除方面确实遇到了麻烦。有人知道我做错了什么吗？
编辑:我设置的测试文件-
import React, { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Product } from '../Models/Product';
const Account = () => {
//Works as-intended
const test = useState(5);
//Returns false when logged
const test2 = useState<Product>({
"ProductID": "p#corn", "Description": "Delicious corn", "ImageLink": "https://testlink.com", "Name": "Corn", "Price": "2.99", "Category": "Food"
});
//What should work, to my understanding, however this makes the route crash when it's navigated to because of the "Inavlid attempt to destructure non-iterable instance
const [test3, setTest] = useState<Product>({});
function clickHandler() {
console.log(test)
}
function clickHandler2() {
console.log(test2)
}
return (
<div className='wrapper'>
<button onClick={clickHandler}>Test</button>
<button onClick={clickHandler2}>Test2</button>
</div>
)
}
export default Account;产品模型-
export interface Product {
ProductID: string;
Description: string;
ImageLink: string;
Name: string;
Price: string;
Category: string;
}回答 1
Stack Overflow用户
发布于 2021-04-05 00:02:40
下面是一个与您的案例有些关联的一个CodeSandbox示例，它演示了useState如何在其他人的机器上工作。
正如您将从测试和我共享的示例中看到的那样，具有指定的泛型类型的useState应该是很好的、很好的，并且按照您的预期行事。
这就强调了你的本地机器或项目环境有一些对你来说很特别的东西。
import React, { useCallback, useState } from "react";
import "./styles.css";
interface Product {
Name: string;
Price: number;
}
const productA = {
Name: "Corn",
Price: 2.99
};
const productB = {
Name: "Frozen Orange Juice",
Price: 10_000
};
export default function Show() {
const [product, setProduct] = useState<Product>(productA);
const toggleProduct = () =>
setProduct(product === productA ? productB : productA);
return (
<div className="App" onClick={toggleProduct}>
<h1>{product.Name}</h1>
<h2>{product.Price}</h2>
</div>
);
}既然你问了如何得到最好的回应..。
理想情况下，当发布时，尝试创建一个其他人可以看到失败的问题案例。如果您尝试这样做(例如使用CodeSandbox)，但它在那里工作很好，那么就需要清理您自己的本地环境，直到您弄清楚您的设置有什么独特之处才能让您的代码中断，而不是其他人。
理想情况下，如果您不能在单个页面repro (沙箱)中创建它，因为它与您的项目结构有关，那么通过在github上公开共享实际的项目结构及其代码和配置来创建一个可运行的再现，这样人们就可以通过检查并构建/运行它来重新创建您的问题。这样，他们很快就能追踪到你的项目的独特之处。
通常情况下，创建一个repro的过程将帮助您解决问题--例如，您从一个普通的create-react开始--从https://create-react-app.dev/docs/adding-typescript/的应用类型记录框架开始填充一个空白的github回购，然后您的问题案例突然开始在那里工作--现在您已经有了将您的项目的特殊特性添加到简单的repro中的基础，直到它崩溃。
https://stackoverflow.com/questions/66941422
复制相似问题
腾讯云开发者
