Formik调用了"handleChange"，但您忘记将"id"或"

Question

我正在尝试将Formik与MaterialUI Select组件一起使用。

沙箱在这里：https://codesandbox.io/s/lively-wind-75iliv?file=/src/App.tsx

每当我从下拉列表中选择一个新值时，该值都不会更新，我在控制台上看到以下消息：

警告：Formik调用了handleChange，但您忘记传递id或name属性：未定义的Formik无法确定要更新的值。有关更多信息，请参阅https://formik.org/docs/api/formik#handlechange-e-actchangeeventany——无效

问题是：

1. 如何解决这个问题
2. 我在做什么不规范的事吗
3. 一般来说，将Formik与MaterialUI一起使用是个好主意，还是应该简单地使用原生HTML select？(我试过后者，效果很好(

代码也粘贴在下面：

import "./styles.css";
import { useFormik } from 'formik';
import {FormControl, InputLabel, Button, Select, MenuItem} from '@material-ui/core';


export default function App() {

const formik = useFormik({
initialValues: {
favourite_number: 10
},
onSubmit: (values: object) => {
console.log('about to submit:', values);
alert(JSON.stringify(values, null, 2));
},
});
return (
<form onSubmit={formik.handleSubmit}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Your favourite number</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={formik.values.favourite_number}
label='Your favourite number'
onChange={formik.handleChange}
onBlur={formik.handleBlur}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>      
<Button color='primary' variant='contained' fullWidth type='submit'>
Submit
</Button>
</form>
);
}

Answer 1

<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={formik.values.favourite_number}
label='Your favourite number'
name="favourite_number"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
>