使用来自 Firebase 实时数据库（Formik + 材料 UI）的选项反应下拉菜单

Question

我在使用下拉菜单时遇到问题，该下拉菜单映射了我从 Firebase 实时数据库中获取的数据，并将 selected 值分配给 Formik 表单，以便将其保存到数据库中的另一个对象。

我有 pushId 键包含名称、城市和 id（pushId 键）的餐厅对象，我有 pushId 键包含名称、价格、id（pushId 键）、restaurantId（餐厅的 id）的菜肴。

*这里我需要另一个 key:value 对，例如 restaurantId: "-MCvTh91-qHLcy09ZpYm"

我使用 useEffect 挂钩获取了餐厅：

const [restaurants, setRestaurants] = useState([])

useEffect(() => {
   let restQuery = Firebase.database().ref('restaurants').orderByKey()
   restQuery.once('value').then(function(snapshot) {
      snapshot.forEach(function(childSnapshot) {
         setRestaurants(prevState => [...prevState, childSnapshot.val()])
      })
   })
},[])

但我无法将餐厅数组映射到下拉表单选项，如果我 select 一家餐厅将其 ID 保存到 Formik 值

<Formik
  initialValues={{
     name: '',
     price: '',
     restaurantId: '',
  }}
  onSubmit = {(data, {resetForm}) => {
     console.log('submit: ', data)
     resetForm()
  }}>
     {({values, handleChange, handleSubmit}) => (
       <Form onSubmit={handleSubmit}>
          <Field name="name" type="input" as={TextField} /><br/>
          <Field name="price" type="input" as={TextField} /><br/>
          <div>Restaurants:</div>
          <Field type="select" as={Select}>
              {restaurants.map((rest) => 
                 <MenuItem name="restaurantId" value={rest.id}>
                    {rest.name}
                 </MenuItem>
              )}
          </Field>
          <div>
             <Button type="submit">Submit</Button>
          </div>
       </Form>
     )}
</Formik>

这使 mi select 下拉菜单中的餐馆数量如下：

但是，当我单击该选项时，错误控制台会抛出这些警告，但没有任何反应

Warning: Formik called `handleChange`, but you forgot to pass an `id` or `name` attribute to your input: undefined
Formik cannot determine which value to update. For more info see https://github.com/jaredpalmer/formik#handlechange-e-reactchangeeventany--void
  

Material-UI: You have provided an out-of-range value `[object Object]` for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are `-MCvTh91-qHLcyO9ZpYm`, `-MCxfsFz6pSaokkbBwpA`, `-MCxg6CB_U4HaCE659Tw`.

我坚持这些，我尝试的任何方法都不起作用。

Answer 1

正如@Chris G 在评论中的回答，问题出在 name 属性的位置，它应该在 select 元素而不是选项元素中：

{({values, handleChange, handleSubmit}) => (
   <Form onSubmit={handleSubmit}>
       <Field name="name" type="input" as={TextField} /><br/>
       <Field name="price" type="input" as={TextField} /><br/>
       <div>Restaurants:</div>
       <Field type="select" name="restaurantId" as={Select}>
           {restaurants.map((rest) => 
               <MenuItem key={rest.id} value={rest.id}>
                   {rest.name}
               </MenuItem>
           )}
       </Field>
       <div>
          <Button type="submit">Submit</Button>
       </div>
   </Form>
)}

使用来自 Firebase 实时数据库（Formik + 材料 UI）的选项反应下拉菜单

React dropdown with options from Firebase realtime db (Formik + materialUI)

javascript

firebase

reactjs

material-ui

formik