javascript - Formik 处理对象数组

Question

我正在尝试实现这样结构的对象数组

selectedItems: [
                  {
                    _id: ""
                  }
              ]

我想要做的是当用户选择例如2个或更多_id时，我希望结构是这样的

[
   {
      _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>
            )}
        />)
}

Answer 1

您不需要为 select 的选项组件提供 name 属性，只需将其删除，您的代码就会按预期运行:

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