React useState对象状态更新报错：setFieldValue.providerName is not a function

你的实现思路没问题——用单个useState对象管理表单状态是合理的方案，错误源于对useState更新函数的用法误解，属于细节遗漏。

核心错误原因 #

setFieldValue是React useState返回的状态更新函数，不是对象，因此不存在setFieldValue.providerName这类属性方法。你在两处写错了用法：

1. 输入框的onChange回调里直接调用setFieldValue.xxx()
2. handleResetForm里试图通过setFieldValue.xxx()重置字段

修正方案 #

1. 修正输入框的onChange逻辑 #

更新对象类型的state时，需要保留原对象的其他属性，避免状态被覆盖。正确写法是传入一个新对象，展开原fieldValue后覆盖目标属性：

// 原错误写法
onChange={e => setFieldValue.providerName(e.target.value)}

// 修正后函数式更新（更安全，依赖前一次状态时必用）
onChange={e => setFieldValue(prev => ({ ...prev, providerName: e.target.value }))}

// 或直接创建新对象（不依赖前一次状态时可用）
onChange={e => setFieldValue({ ...fieldValue, providerName: e.target.value })}

2. 修正handleResetForm函数 #

直接传入初始状态对象即可完成重置，不需要逐个字段调用：

// 原错误写法
const handleResetForm = () => {
    setFieldValue.projectName("");
    setFieldValue.providerName("");
    // ...其他错误调用
}

// 修正后写法
const handleResetForm = () => {
    setFieldValue({
        projectName: "",
        providerName: "",
        clientName: "",
        description: "",
        budget: 0,
    })
}

3. 额外优化：checkButtonsActive的状态覆盖问题 #

当前checkButtonsActive里的setActiveButtons会覆盖原有属性，比如当mavenlinkConnected为true时，只设置mavenlink: true，会丢失maconomyMavenlink和maconomy属性。修正为合并状态：

const checkButtonsActive = useCallback(() => {
    setActiveButtons(prev => ({
        ...prev,
        mavenlink: mavenlinkConnected,
        maconomy: maconomyConnected,
        maconomyMavenlink: mavenlinkConnected && maconomyConnected
    }))
}, [mavenlinkConnected, maconomyConnected])

同时注意把依赖项加入useCallback的依赖数组，避免闭包问题。

完整修正后的关键代码片段 #

// 输入框示例
<TextField 
    fullWidth 
    onChange={e => setFieldValue(prev => ({ ...prev, projectName: e.target.value }))}
    id="project-name" 
    label="Project Name" 
    variant="outlined"
    value={fieldValue.projectName}
    error={fieldValue.projectName === "" } 
    helperText={fieldValue.projectName === "" ? "Required" : " "}
/>

// 重置函数
const handleResetForm = () => {
    setFieldValue({
        projectName: "",
        providerName: "",
        clientName: "",
        description: "",
        budget: 0,
    })
}

// 按钮状态更新
const checkButtonsActive = useCallback(() => {
    setActiveButtons(prev => ({
        ...prev,
        mavenlink: mavenlinkConnected,
        maconomy: maconomyConnected,
        maconomyMavenlink: mavenlinkConnected && maconomyConnected
    }))
}, [mavenlinkConnected, maconomyConnected])

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