React useState更新状态时出现Argument type不兼容parameter type错误求助

错误原因 #

你初始化的customerState是包含names数组和pickedName字符串的对象，但调用setCustomerState时只传入了pickedName字段，导致新状态丢失了names属性，TypeScript检测到状态结构不匹配，因此抛出类型错误。

解决方法 #

方法1：保留原有状态属性（对象展开） #

修改switchName函数中的setCustomerState调用，使用对象展开运算符...保留原有状态的所有属性，只更新pickedName：

const switchName = () => {
    const namePool = customerState.names;
    const number = Math.floor(Math.random()*3);
    setCustomerState({ ...customerState, pickedName: namePool[number] });
};

方法2：函数式更新（更安全的写法） #

如果状态更新依赖前一次状态的值，推荐使用函数式更新，避免闭包导致的状态过期问题，同时可以优化随机数逻辑，依赖数组长度而非固定数字：

const switchName = () => {
    setCustomerState(prevState => ({
        ...prevState,
        pickedName: prevState.names[Math.floor(Math.random() * prevState.names.length)]
    }));
};

可选：显式定义状态类型（TypeScript场景） #

如果使用TypeScript，显式定义状态类型可以让类型检查更清晰，提前避免类似问题：

type CustomerState = {
    names: string[];
    pickedName: string;
};

const [customerState, setCustomerState] = useState<CustomerState>({
    names: ['Martin', 'Andrea', 'Carol'],
    pickedName: 'Martin'
});

内容的提问来源于stack exchange，提问作者gipcu