reactjs - 使用 TypeScript 的 useContext / createContext - 类型必须有一个返回迭代器的“[Symbol.iterator]()”方法

Question

我阅读了 Kent C. Dodds 的文章 Application State Management with React。

我想使用 TypeScript 而不是 JavaScript。

但是当我想破坏上下文时，我失败了

应用程序本身有效。这只是一个 IDE 错误，但根据我的经验，如果有 IDE 错误，您应该修复它。

这是关于以下行

  const [count, setCount] = context

TS2488: Type 'number' must have a '[Symbol.iterator]()' method that returns an iterator.

代码沙箱重现问题

完整代码：

计数上下文.tsx

import React, {createContext, useContext} from "react";

const initialState = 0

const CountContext = createContext(initialState)

function useCount() {
    const context = useContext(CountContext)
    if (!context) {
        throw new Error(`useCount must be used within a CountProvider`)
    }

    /*
     * This gives error
     * TS2488: Type 'number' must have a '[Symbol.iterator]()' method that returns an iterator.
     */
    const [count, setCount] = context

    const increment = () => setCount((c: number) => c + 1);
    const decrement = () => setCount((c: number) => c - 1);


    return {
        count, increment, decrement
    }
}

function CountProvider(props: any) {
    const [count, setCount] = React.useState(initialState)
    const value = React.useMemo(() => [count, setCount], [count])
    return <CountContext.Provider value={value} {...props} />
}

export {CountProvider, useCount}

页面.tsx

import React from 'react'
import {CountProvider, useCount} from "./count-context";

function Counter() {
    const {increment, decrement} = useCount()

    return (
        <>
            <button onClick={decrement}> Count down</button>
            <br/>
            <button onClick={increment}> Count up</button>
        </>
    )

}

function CountDisplay() {
    const {count} = useCount()
    return <p>The current counter count is {count}</p>
}


export function CountPage() {
    return (
        <div>
            <h1>Count Page</h1>
            <CountProvider>
                <CountDisplay/>
                <Counter/>
            </CountProvider>
        </div>
    )
}

标签： reactjstypescriptreact-hooksuse-context

Answer 1

您的错误是有道理的，因为您的初始状态是 number 类型，而您的提供者接受从 返回的元组useState，请尝试：

type ContextType<S> = [S, React.Dispatch<React.SetStateAction<S>>] | null;

const initialState = null;
const CountContext = createContext<ContextType<number>>(null);