formik中的嵌套字段数组

Question

我正在使用formik作为表格。 在我的表单中，我需要使用FieldArray的概念，它是一个嵌套的概念。 我无法使用相应的值填充嵌套表单。 这是我的做法

const Itinerary = ({ itineraries, push, remove }) => {
  return (
    <>
      <Heading>Itinerary</Heading>
      {itineraries && itineraries.length === 0 && (
        <span
          style={{
            color: theme.color.primary,
            padding: "0 10px",
            cursor: "pointer"
          }}
          onClick={() => push({})}
        >
          +
        </span>
      )}
      {itineraries &&
        itineraries.length > 0 &&
        itineraries.map((day, index) => {
          return (
            <React.Fragment key={index}>
              <Row key={index} style={{ alignItems: "center" }}>
                <Text>
                  How many
                  <DaysField
                    component={TextField}
                    name={`itineraries.${index}.days`}
                    placeholder="days"
                    normalize={val => val && parseInt(val)}
                  />
                  of itinerary?
                </Text>
                {itineraries && itineraries.length - 1 === index && (
                  <>
                      <Button>
                        <Button.Round onClick={() => push({})}>+</Button.Round>
                      </Button>
                      <Button>
                        <Button.Round onClick={() => remove(index)}>
                          -
                        </Button.Round>
                      </Button>
                  </>
                )}
              </Row>
              <FieldArray
                name={`itineraries.${index}.itinerary`}
                render={({ push, remove }) => (
                  <>
                    <Heading>
                      Fill up itinerary
                      {itineraries[index].itinerary &&
                        itineraries[index].itinerary.length === 0 && (
                          <span
                            style={{
                              color: theme.color.primary,
                              padding: "0 10px",
                              cursor: "pointer"
                            }}
                            onClick={() => push({})}
                          >
                            +
                          </span>
                        )}
                    </Heading>
                    {itineraries[index].itinerary &&
                      itineraries[index].itinerary.length > 0 &&
                      itineraries[index].itinerary.map((i, idx) => {
                        console.log(
                          "itinerary index",
                          itineraries[index].itinerary[idx]
                        );
                        return (
                          <React.Fragment>
                            <Row
                              style={{
                                alignItems: "center",
                                alignSelf: "center"
                              }}
                            >
                              <Col xs={12} md={3}>
                                <Field
                                  component={TextField}
                                  placeholder="Day"
                                  name={`${itineraries[index].itinerary[idx]}.day`}
                                />
                              </Col>
                              <Col xs={12} md={3}>
                                <Field
                                  component={TextField}
                                  placeholder="Description"
                                  name={`${itineraries[index].itinerary[idx]}.description`}
                                />
                              </Col>
                              <Col xs={12} md={3}>
                                <Field
                                  component={TextField}
                                  placeholder="Overnight"
                                  name={`${itineraries[index].itinerary[idx]}.overnight`}
                                />
                              </Col>
                              <Col xs={12} md={2}>
                                <Field
                                  component={TextField}
                                  placeholder="Altitude"
                                  name={`${itineraries[index].itinerary}.altitude`}
                                  normalize={value => {
                                    return value && parseFloat(value);
                                  }}
                                />
                              </Col>
                              <Col xs={12} md={1}>
                                {itineraries &&
                                  itineraries.length - 1 === index && (
                                    <>
                                      <ActionBtn>
                                        <Button>
                                          <Button.Round
                                            onClick={() => push({})}
                                          >
                                            +
                                          </Button.Round>
                                        </Button>
                                        <Button>
                                          <Button.Round
                                            onClick={() => remove(index)}
                                            color={theme.color.red}
                                          >
                                            -
                                          </Button.Round>
                                        </Button>
                                      </ActionBtn>
                                    </>
                                  )}
                              </Col>
                            </Row>
                          </React.Fragment>
                        );
                      })}
                  </>
                )}
              />
            </React.Fragment>
          );
        })}
    </>
  );
};

行程initialValues 看起来像这样

itineraries: [
                {
                  days: 1,
                  itinerary: [
                    {
                      day: "Day 1",
                      description: "description",
                      overnight: "overnight info",
                      altitude: 150.5
                    },
                    {
                      day: "Day 2",
                      description: "description 2",
                      overnight: "overnight info",
                      altitude: 150.5
                    }
                  ]
                }
              ]

只有嵌套部分不起作用。 任何人都可以帮助我吗？

Answer 1

您的问题在于如何传递组件的名称

name={`${itineraries[index].itinerary[idx]}.overnight`}

这样，您所做的就是将itineraries[index].itinerary[idx]的值传递给一个字符串。

您应该做的是将其作为字符串传递，而不是它的值。

name={`itineraries[${index}].itinerary[${idx}]}.overnight`}

这样，只有索引才能打印值，这是正确的。

这是区别

${itineraries[index].itinerary[idx]}.overnight将返回[object Object].overnight因为您正在访问itineraries[index].itinerary[idx]并且它正在调用.toString() 。

但是itineraries[${index}].itinerary[${idx}]}.overnight itineraries[0].itinerary[0].overnight itineraries[${index}].itinerary[${idx}]}.overnight将返回itineraries[0].itinerary[0].overnight这是一个有效的表单字符串，它可以得到它的值。