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

Question

我是新来输入脚本的人，我正在尝试使用使用状态钩子和键入脚本将状态设置为react。

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

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

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

但出现以下错误。 谁能告诉我。

1. 像我一样在使用状态内设置对象是否有效？
2. 为什么我遇到打字稿错误？

Answer 1

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

此外，您应该为useState挂钩提供State[]的通用类型参数

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

Answer 2

您需要为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]);

Answer 3

我想这就是您想要实现的目标。确保正确定义州类型，而不是从其他软件包中导入

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.
            )
        }
    </>
    )
}