打字稿错误类型无法分配给状态 - usestate

Posted 2023-02-22

【中文标题】打字稿错误类型无法分配给状态 - usestate

【英文标题】：Typescript error type not assign able to state - usestate

【发布时间】：2020-08-25 03:53:09

【问题描述】：

我是键入脚本的新手，我正在尝试使用使用状态挂钩和键入脚本来设置响应状态。

const intialState: State =
    items: [],
    value: "",
    error: null


const [data, setData]= useState([intialState]);

return (
    <>
        
            data.items.map(x) => (
                //my html component to be displayed.
            )
        
    </>
)

但我收到以下错误。 谁能告诉我。

像我所做的那样在 usestate 中设置对象是否有效？ 为什么我收到 typescript 错误？

【问题讨论】：

您的州类型是什么样的？错误基本上是说您的 State type(interface, class) 没有名为 items 的属性

实际上我试图将一个新状态创建为空对象，那么我应该在那里定义什么类型？对象是有效类型吗？

我们能看看State 的样子吗？

另见：Set types on useState React Hook with TypeScript

【参考方案1】：

首先，我们应该检查State 和initialState 对象之间是否存在接口不匹配。如果您可以发布State 的类型定义，将会有所帮助。

此外，您应该为useState 钩子提供State[] 的泛型类型参数

const [data, setData]= useState<State[]>([intialState]);

【参考方案2】：

我想这就是你试图达到的目标。确保正确定义 State 类型，而不是从其他包中导入

interface State 
    items: any[];
    value: string;
    error: string | null;



const MyComponent: (props) => 
    const intialState: State =
        items: [],
        value: "",
        error: null
    
    const [data, setData] = useState(intialState)


return (
   <>
        
            data.items.map(x) => (
                //my html component to be displayed.
            )
        
    </>
    )

【参考方案3】：

您需要为 useState 指定类型。由于它是您的状态对象的数组，您可以像这样编写它

const [data, setData]= useState<State[]>([intialState]);

还要确保为状态对象定义类型

interface ErrorType 
   status: Number // more keys and their types here

interface MyDataType 
  items: ItemType[],
  error: ErrorType | null,
  value: string,

发布您可以将它与 useState 类似的使用

const [data, setData]= useState<MyDataType[]>([intialState]);

您的数据是一个对象数组，当您更新状态时，您需要合并这些值。为此，您可以使用功能 setState

var updatedDataObj =  items: ["a","b","c"], error: "404", value: "xyx", ;
setData(prevData => [...prevData, updatedDataObj]);

【讨论】：

感谢您的回复，请您告诉我 setData 与多个对象的语法是什么。 var updatedDataObj = 项目：[“a”，“b”，“c”]，错误：“404”，值：“xyx”，;设置数据（更新数据对象）；这是正确的吗？

您要合并对象还是仅替换它们。数据也是一个对象数组，所以我假设您想向其中添加更多对象。那是对的吗？或者你只是想在状态中存储一个对象而不是一个对象数组？

是的...我想添加更多对象。所以基本上我正在尝试将codesandbox.io/embed/ypyxr11109 这个示例转换为使用 usestate 钩子的可重用组件

我据此更新了我的答案。请检查

您能否为上述示例提供一个小sn-p或使用usestate的小提琴。