React技术问题：Formik结合MUI单选按钮更新未触发渲染

问题核心 #

你遇到的问题根源是替换后的Radio组件没有正确绑定Formik的状态更新机制——修改单选值时Formik的values未同步更新，因此组件不会触发重渲染。

具体修复步骤 #

针对你代码里EditTodo组件中的Popover部分，可通过以下两种方式修复：

1. 用Formik的Field组件自动绑定状态
   借助Formik的Field组件自动处理value和onChange，确保状态同步：

   <Field name="priority">
     {({ field }) => (
       <RadioGroup {...field} row>
         <FormControlLabel value="low" control={<Radio />} label="Low" />
         <FormControlLabel value="medium" control={<Radio />} label="Medium" />
         <FormControlLabel value="high" control={<Radio />} label="High" />
       </RadioGroup>
     )}
   </Field>
   

2. 手动关联Formik状态与事件
   若不想使用Field组件，直接通过Formik提供的values和handleChange绑定：

   <RadioGroup
     value={values.priority}
     onChange={(event) => {
       handleChange({
         target: { name: 'priority', value: event.target.value }
       });
     }}
     row
   >
     <FormControlLabel value="low" control={<Radio />} label="Low" />
     <FormControlLabel value="medium" control={<Radio />} label="Medium" />
     <FormControlLabel value="high" control={<Radio />} label="High" />
   </RadioGroup>
   

关键提醒 #

• 必须通过Formik的handleChange或setFieldValue方法更新状态，禁止直接修改values对象，否则Formik无法感知状态变化，不会触发重渲染。
• 确保RadioGroup的选中值与Formik字段priority的初始值类型一致（比如均为字符串），避免类型不匹配导致状态不同步。

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