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

【问题标题】：Typescript error type not assign able to state - usestate打字稿错误类型无法分配给状态 - 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

标签： reactjs typescript react-hooks typescript-typings typescript2.0

【解决方案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的小提琴。