Question

我在 React 组件中输入 2 个元素时遇到问题。

第一个：

 const [data, setData] = useState<any>(localRead);

我正在使用它来获取 localStorage 并用于从 API 中保存我的数据

第二个是：

 const [response, setResponse] = useState<any>([]);

这就像从 API 获取信息并使用 Vimeo + YouTube + Video 接口一样，但是当我使用它时，它不想工作..

关于如何输入的任何想法？

Answer 1

对于第一个示例，如果您省略 <any>，那么 typescript 会将 localRead 的类型推断为状态的类型：

const [data, setData] = useState(localRead);
// data is now the same type as localRead

但第二个例子更难。您必须向 useState 提供类型提示，因为它的值是稍后设置的。要确定要使用的类型，您必须使用提供此数据的函数的返回类型。在大多数打字稿环境中，您可以将光标悬停在函数上以查看它返回的类型。这是您要提供给 useState 的类型。

例如，假设您正在使用这样实现的库：

// External library that provides data.
export type MyData = { foo: number }[]

export function getMyData(): MyData {
    return [
        { foo: 123 },
        { foo: 456 },
    ]
}

然后你可以编写一个看起来像这样的组件：

function Component() {
    const [myState, setMyState] = useState([])

    useEffect(() => {
        const myData = getMyData()
        setMyState(myData)
    }, [])

    return <></>
}

此时 myState 的类型是错误的。但是，如果您将鼠标悬停在 getMyData 上，您应该会看到类型信息，如下所示：

function getMyData(): MyData

您现在可以 import { MyData } from 'whatever-lib' 并将其用于您的州。结果：

function Component() {
    const [myState, setMyState] = useState<MyData>([])

    useEffect(() => {
        const myData = getMyData()
        setMyState(myData)
    }, [])

    return <></>
}

当然，根据您使用的库，这些类型可能会有所不同，但这描述了当该状态来自其他代码时，您可能如何从您的状态中发现正确的类型。

Playground with the above example

您也可以直接从数据函数中获取返回类型，例如：

useState<ReturnType<typeof getMyData>>([])

如果您使用的库没有导出函数返回的类型，或者该类型在某些方面非常冗长，这可能会很方便。但如果上述过程不能产生令人满意的结果，我只会鼓励使用这种难以阅读的类型。

我如何输入 react useState 钩子？

1 个答案: