使用 Firebase realtime db (Formik + materialUI) 中的选项对下拉列表做出反应答案

【问题标题】：React dropdown with options from Firebase realtime db (Formik + materialUI)使用 Firebase realtime db (Formik + materialUI) 中的选项对下拉列表做出反应
【发布时间】：2020-07-25 10:32:52
【问题描述】：

我在映射通过我从 Firebase 实时数据库获取的数据并将选定值分配给 Formik 表单以便将其保存到数据库中的另一个对象的下拉列表时遇到问题。

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

*这里我需要另一个键：值对，例如 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()])
      })
   })
},[])

但我根本无法将餐馆数组映射到下拉表单选项，如果我选择一家餐馆，则将其 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 选择的餐厅，例如：

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

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`.

我被这些卡住了，我尝试的任何方法都不起作用。

【问题讨论】：

不是 Formik 专家，但 name 属性应该进入 <select> 等效项，而不是 <option> 一个，afaik。
@ChrisG 是的，解决了它。谢谢，我有什么办法可以将您的评论标记为解决方案。再次感谢！
您可以编写自己的答案，并根据需要将其标记为正确。

标签： javascript reactjs firebase material-ui formik

【解决方案1】：

正如@Chris G 在 cmets 中回答的那样，问题出在 name 属性的位置上，它应该在 select 元素中，而不是在 option 元素中：

{({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>
)}

【讨论】：