如何使用Formik fieldArray设置React选择的默认值？

Question

我正在使用formik和fieldarray来创建动态形式，并且正在使用反应选择。我正在研究项目的编辑。在编辑中，如果存在以前的值，则必须显示这些值，并且可以更改这些值，但是我无法创建这些值。这是我的代码。

这是formik的初始值的代码，

  const initialOrderItemData = orderItems && orderItems.map((orderItem) => {
  return {
    itemId: orderItem.itemId,
    quantity: orderItem.quantity,
  }
});
  
  const initialOrderInfo = {
    orderedItemDataArray: initialOrderItemData,
  };

这是我使用此代码的表单，

              <Formik
                initialValues={initialOrderInfo}
                onSubmit={handleSubmit}
                validationSchema={HotelOrderSchema}
              >
                {({ errors, setFieldValue, touched, values, name, }) => (
                  <Form>
                          <Row>
                            <Table size="sm" hover>
                              <thead>
                                <tr>
                                  <th>Item</th>
                                  <th>Quantity</th>
                                  <th>Operation</th>
                                </tr>
                              </thead>
                              <tbody>
                              <FieldArray
                              name="orderedItemDataArray"
                              render={({ remove, push }) => (
                            <>
                              {values.orderedItemDataArray.length > 0 &&
                                values.orderedItemDataArray.map(
                                  (order, index) => (
                                    <tr key={index}>
                                      <td>
                                        <Select
                                          as="select"
                                          name={`orderedItemDataArray.${index}.itemId`}
                                          options={menuOptions}
                                          placeholder="Type"
                                          // value={selectedItems(order.itemId)}
                                          value={menuOptions.find(op => {
                                            return op.value === order.itemId
                                         })}
                                        />
                                      
                                      </td>
                                      <td>
                                        <Field
                                          type="number"
                                          className="form-control"
                                          name={`orderedItemDataArray.${index}.quantity`}
                                          min="0"
                                          placeholder="Quantity"
                                        />
                                      </td>
                                      <td>
                                        <ButtonGroup>
                                          {values.orderedItemDataArray
                                            .length !== 1 && (
                                            <Button
                                              color="primary"
                                              size="sm"
                                              onClick={() => remove(index)}
                                            >
                                              -
                                            </Button>
                                          )}
                                          {values.orderedItemDataArray
                                            .length -
                                            1 ===
                                            index && (
                                            <Button
                                              color="secondary"
                                              size="sm"
                                              onClick={() =>
                                                push({
                                                  itemId: '',
                                                  quantity: '',
                                                })
                                              }
                                            >
                                              +
                                            </Button>
                                          )}
                                        </ButtonGroup>
                                      </td>
                                    </tr>
                                  )
                                )}
                            </>
                          )}
                        />
                        </tbody>
                      </Table>
                    </Row>
                  </Form>
              </Formik>

我能够获得该值，但我无法更改值并设置新值。

Answer 1

在您的选择组件中，您必须包括一个on Change事件，这样

//set a state for the changed selected option

const [selectedOption,setSelectedOption] = useState()

<Select
    as="select"
    name={`orderedItemDataArray.${index}.itemId`}
    options={menuOptions}
    placeholder="Type"
    // value={selectedItems(order.itemId)}
    value={menuOptions.find(op => {
    return op.value === order.itemId
    onChange={(e) => {
        setSelectedOption(e.target.value)
    }}
    })}
/>

//then if you  wanna access the selected option  you  can use the useState value.

<p>{selectedOption}</p>