Reactjs复选框在组件的更新状态下不起作用

Question

我有一个名为User.js的组件。我在那里有一个选择用户权限的部分。

<Grid item xs={12} sm={12} md={12} container>
    <FormControl>
    <FormLabel>Permissions</FormLabel>
    <FormGroup row>
      {routes.map((route) =>
        route.children.map((e,i) => (
          <Grid item xs={12} sm={12} md={2}>
            <FormControlLabel
            
              control={<Checkbox name="permissions"
              value= {e.path}  
              onChange={handleChange}
              onBlur={handleBlur}/>}                                  
              label={route.name + " " + e.name}
              key={i}
            />
          </Grid>
        ))
      )}
    </FormGroup>

    </FormControl>
</Grid>

这是该权限部分的完整代码。当我创建一个新用户时，它可以正常工作。权限像这样permissions: ['/create-user','update-user'],

传递到后端

当我尝试更新用户时，使用相同的组件。复选框未打勾。即使permissions数组中填充了这些值permissions: ['/create-user','update-user'],

我使用formik进行验证，并且整个Grid都包裹着

<Formik
  initialValues={initialValues}
  onSubmit={submit}
  validationSchema={validationSchema}
  enableReinitialize
>

自从我通过enableReinitialize道具以来，我认为formik不会阻止渲染。

如何解决此问题？

Answer 1

如果您正在使用material-ui的FormControlLabel，则在控件prop中，此复选框将需要具有布尔值的“选中” prop。

<FormControlLabel
  control={
    <Checkbox
      name="permissions"
      value={e.path}
      onChange={handleChange}
      onBlur={handleBlur}
      checked={/*permission array contains path*/}
    />
  }
  label={route.name + " " + e.name}
  key={i}
/>;