MUI TextField无法更新React状态的原因排查

核心问题原因 #

• 事件绑定属性名错误
  MUI的TextField组件触发输入变更的标准属性是onChange，但你的代码里写的是handleChange={handleChange}，属于属性名误用，导致输入时根本不会调用handleChange函数，自然无法更新状态。对比正常工作的UserInput组件，它用的是正确的onChange属性。

• 初始值设置方式错误（非受控vs受控）
  你用defaultValue设置初始内容，这是非受控组件的写法。但userData是通过API异步获取的，组件首次渲染时userData还是初始的空数组，此时defaultValue会被设为undefined；当API返回数据后userData更新，defaultValue不会重新渲染（非受控组件的初始值仅在第一次渲染生效）。正确做法是把TextField改成受控组件，用value属性绑定状态值，配合onChange实时同步。

• key属性取值不合理
  你用input.placeholder作为组件key，但placeholder会随userData变化而改变，还可能出现空值或重复值，导致React无法正确识别组件身份，引发不必要的重渲染甚至警告。应使用唯一且稳定的input.id作为key。

修正后的代码示例 #

{userInputDataSchema.map((input) => (
  <div key={input.id}> {/* 改用input.id作为key */}
    {input.id === 9 ? (
      <TextField
        name="whyWork_1"
        label="Diversity & Inclusion at Australia Post"
        multiline
        rows={15}
        value={input.placeholder} {/* 替换defaultValue为value，实现受控 */}
        fullWidth
        fullHeight
        type={input.type}
        onChange={handleChange} {/* 修正属性名为onChange */}
      />
    ) : null}
  </div>
))}
</InputBoxContainer>

额外优化建议 #

你的userData初始状态设为[]（数组），但后续代码中取的是userData.companyTitle这类对象属性，建议把初始状态改成空对象{}，避免首次渲染时出现undefined：

const [userData, setuserData] = useState({})

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