React中useState默认值类型赋值错误问题求助

你这段代码的核心问题是：把String、Number构造函数当成了类型标记，但useState的参数是初始值，不是类型定义。

当前你给useState的默认值里，websites数组的对象是{ label: String, value: Number }——这里的String和Number是JS内置的构造函数，不是字符串/数字类型。这就导致初始的dropdowns.websites里的对象，label是函数本身，value也是函数本身，和后续setDropdowns传入的字符串（'Google.com'）、数字（1）类型完全不兼容，所以触发了类型不匹配的错误。

正确写法 #

如果是TypeScript项目 #

先定义好类型，再给useState指定类型约束：

// 定义单个网站选项的类型
type WebsiteOption = {
  label: string;
  value: number;
};

// 定义整个dropdowns的状态类型
type DropdownState = {
  websites: WebsiteOption[];
};

export default () => {
    // 指定state类型，初始值用符合类型的空数组或占位值
    const [dropdowns, setDropdowns] = useState<DropdownState>({
        websites: [],
        // 或者需要初始占位的话：websites: [{ label: '', value: 0 }]
    });

    useEffect(() => {
        setDropdowns({
            websites: [
                {
                    label: 'Google.com',
                    value: 1,
                },
            ],
        });

        return () => {};
    }, []);

    ...
};

如果是JavaScript项目（用JSDoc做类型标注） #

/**
 * @typedef {Object} WebsiteOption
 * @property {string} label - 网站名称
 * @property {number} value - 网站对应ID
 */

/**
 * @typedef {Object} DropdownState
 * @property {WebsiteOption[]} websites - 网站下拉选项列表
 */

export default () => {
    /** @type {[DropdownState, React.Dispatch<React.SetStateAction<DropdownState>>]} */
    const [dropdowns, setDropdowns] = useState({
        websites: [],
    });

    useEffect(() => {
        setDropdowns({
            websites: [
                {
                    label: 'Google.com',
                    value: 1,
                },
            ],
        });

        return () => {};
    }, []);

    ...
};

总结一下：useState的初始值必须是符合你期望类型的实际数据（比如空数组、具体的字符串/数字），类型约束要通过TypeScript的类型注解或者JSDoc来实现，不能把构造函数当成类型写在初始值里。

内容的提问来源于stack exchange，提问作者Mr.Singh