打字稿错误类型不能分配给状态-用户财产

Question

我不熟悉类型脚本，我正在尝试使用usestatehook和类型脚本在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. 像我这样在usestate中设置对象有效吗？

Answer 1

您需要为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 2

我想这就是你想要达到的。确保正确定义状态类型，而不是从其他包导入

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

Answer 3

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

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

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