Question

使用React Hook Form和material-ui复选框组件提交表单构建时出现错误。复选框的数量是根据我的api中的列表构建的：

        <Grid item xs={12}>
          <FormControl
            required
            error={errors.project?.stack ? true : false}
            component='fieldset'>
            <FormLabel component='legend'>Tech Stack</FormLabel>
            <FormGroup>
              <Grid container spacing={1}>
                {techs.map((option, i) => (
                  <Grid item xs={4} key={i}>
                    <FormControlLabel
                      control={
                        <Checkbox
                          id={`stack${i}`}
                          name='project.stack'
                          value={option.id}
                          inputRef={register({required: 'Select project Tech Stack'})}
                        />
                      }
                      label={option.name}
                    />
                  </Grid>
                ))}
              </Grid>
            </FormGroup>
            <FormHelperText>{errors.project?.stack}</FormHelperText>
          </FormControl>
        </Grid>

提交表单时，我遇到以下错误（几次，每个呈现的复选框1个）：

未捕获（承诺）错误：对象作为React子对象无效（找到：带有键{type，message，ref}的对象）。如果您打算渲染子集，请改用数组。

我不明白此错误。该消息显然表明这是一个渲染问题，但是该组件可以正常渲染。问题在提交时发生。有什么建议吗？

谢谢

Answer 1

您可以使用默认的复选框控制器：

<FormControlLabel
    control={
      <Controller
        name={name}
        control={control}
        render={(props) => (
          <Checkbox
            {...props}
            checked={props.value}
            onChange={(e) => props.onChange(e.target.checked)}
          />
        )}
      />
    }
    label={label}
  />

我使用了 RHF 的控制器示例，但必须添加 checked={props.value}： https://github.com/react-hook-form/react-hook-form/blob/master/app/src/controller.tsx

Answer 2

我设法在不使用Controller的情况下使其工作。道具应位于FormControlLabel内，而不应位于Checkbox内

                <Grid item xs={4} key={i}>
                    <FormControlLabel
                      value={option.id}
                      control={<Checkbox />}
                      label={option.name}
                      name={`techStack[${option.id}]`}
                      inputRef={register}
                    />
                  </Grid>
                ))}

React Hook表单+材质UI复选框

2 个答案: