Reactjs 当我更改选择时，我收到：'；在<；上使用'defaultValue'或'value'道具；选择>；而不是在<；选项>'；

我有这个材料选择组件：

<FormControl fullWidth variant="outlined" className={classes.formControl}>
  <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
    Filial
  </InputLabel>
  <Select
    onChange={handleChange}
    onBlur={handleBlur}
    error={touched.filial && Boolean(errors.filial)}
    value={values.filial}
    defaultValue={'DEFAULT'}
    inputProps={{
      name: 'filial',
      id: 'outlined-filial-native-simple',
    }}
  >
    <option value="DEFAULT" disabled>Choose a salutation ...</option>
    <option value={10}>Ten</option>
    <option value={20}>Twenty</option>
    <option value={30}>Thirty</option>
  </Select>
</FormControl>

当我填写表单的字段并单击“提交”按钮时，会正确打印我在表单中选择的值，但会在控制台中抛出此错误

---

如何解决这个问题？

我遇到了同样的问题，现在我解决了。我没有在我的项目中使用formik，但下面的方法与我的方法类似，希望它能有所帮助

首先，在您的

标记中，您同时拥有

值

和

默认值

。但是只要有一个就好了。（请注意，您收到的警告是“使用

defaultValue

或

value

道具”）。在您的情况下，假设您将删除

默认值

，并保留

值

现在，确保

values.durth

设置为

'DEFAULT'

，因此

value={values.durth}

将表示初始值为

'DEFAULT'

，下拉列表将最初显示

选择称呼…

---

然后，当下拉选择更改时，handleChange函数应重新呈现组件。

这是一个警告，而不是错误。如果你愿意，你可以忽略它。我没有使用

formik

的经验，但也许它会自动设置一个

选中的
道具？我所知道的是您正在设置
值
和
默认值
。您应该只使用一个。它建议您直接传递
可选
数组的一项，而不是在选项中设置默认标签
const enhanceWithFormik = withFormik({
  mapPropsToValues: () => ({ email: '', password: '', filial: '' }),
  handleSubmit: values => {
    console.log(values)
  },
  isInitialValid: false,
  validateOnChange: true,
  validateOnBlur: true,
  displayName: 'MyForm',
  validationSchema: schema
})