Formik обрабатывать массив объектов - PullRequest
Новая
       12

Formik обрабатывать массив объектов

0 голосов
/ 13 апреля 2020

Я пытаюсь реализовать массив объектов такой структуры, как эта 

selectedItems: [
                  {
                    _id: ""
                  }
              ]

, что я хочу сделать, это когда пользователь выбирает, например, 2 или более _id, я хочу, чтобы структура была похожа this 

[
   {
      _id: "123"
   },

   {
      _id: "456"
   },

   {
      _id: "789"
   },
]

, но в настоящее время я получаю с моей реализацией массив _id, который будет содержать несколько элементов, подобных этому 

[
   {
      _id: ["123", "456", "789"]
   }
]

Я следовал документации по formik, предлагающей реализовать это Решение, когда у нас есть массив объектов. моя реализация 

const GetSelectedItems = () => {
    return (
        <Formik
            initialValues={{
                selectedItems: [{
                    _id: ""
                }]
            }}
            onSubmit={values => {
                console.log(values)
            }}
            render={({values, handleChange}) => (
                <Form>
                    <FieldArray
                        name="selectedItems"
                        render={arrayHelpers => (
                            <div>
                                {values.selectedItems && values.selectedItems.length > 0 ? (
                                    values.selectedItems.map((item, index) => (
                                        <div key={index}>
                                            <Field as="div"
                                                   name={`selectedItems${[0]}._id`}
                                            >
                                                <select name={`selectedItems.${[0]}._id`}
                                                        multiple={true}
                                                        className="form-control"
                                                        value={item._id}
                                                        onChange={event => {
                                                            handleChange(event);
                                                        }}
                                                >
                                                    <option value={values.selectedItems._id}>
                                                        Choisir items
                                                    </option>
                                                    {itemList(items)} // data from api
                                                </select>
                                            </Field>
                                        </div>
                                    ))
                                ) : null}
                                <div>
                                    <div>
                                        <button type="submit">Submit</button>
                                    </div>
                                </div>
                            </div>
                        )}
                    />
                </Form>
            )}
        />)
}

1 Ответ

1 голос
/ 13 апреля 2020

Вам не нужно указывать имя для компонентов выбора, просто удалите его, и ваш код будет работать как положено: 

// Removed name props from this component
<option key={option._id} value={`${option._id}`}>
    {option._id}
</option>
...