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的选项组件，只需删除它，您的代码即可按预期运行：

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

Formik处理对象数组

1 个答案: