Formik fieldarray 名称嵌套三层深

Question

希望根据以下初始值得到一些帮助。这只是我的数据的一个片段，但我正在尝试在 itinerary 级别执行 Formik FieldArray，嵌套三层，但不确定要为此 FieldArray 名称分配什么名称。

{itineraryGroups[itineraryDetails].map((idetail, index) => (

            <FieldArray
            name={`itineraryGroups.${index}.itineraryDetails.itinerary`}          
            render={(arrayHelpers) => (
              <React.Fragment>
                    {idetail.itinerary.map((i, idx) => (

只是不确定我的 FieldArray 名称应该在 itinerary 级别，因为这不起作用：name={itineraryGroups.${index}.itineraryDetails.itinerary}

这里很明显，itineraryDetails也是一个数组，所以不确定这是否也需要一个数组索引。

下面是我的初始值设置：

const itineraryGroup = {
          itineraryName: "",
          itineraryDetails: [
            {
              day: "Monday",
              itinerary: [
                {
                    day: "Day 1",
                    description: "description one"               
                }
              ]
            },
            {
              day: "Tuesday",
              itinerary: [
                {
                    day: "Day 2",
                    description: "description two",               
                }
              ]
            }                                                                       
          ]
      };
      
      
const INITIAL_FORM_STATE = {
  name: '',
  itineraryGroups: [itineraryGroup]
};

    <Formik
      enableReinitialize
      initialValues={{ 
        ...INITIAL_FORM_STATE
      }}

Answer 1

如果 itineraryGroups 是一个像您声明的那样只有 1 个元素的数组，您可以这样更新：

{itineraryGroups[0].itineraryDetails.map((idetail, index) => ( 

  <FieldArray
  name={`itineraryGroups[0].itineraryDetails[${index}].itinerary`}          
  render={(arrayHelpers) => (
    <React.Fragment>
          {idetail.itinerary.map((i, idx) => (

更新：如果itineraryGroups有多个元素，你需要添加更多map:

{itineraryGroups.map((iGroup, indexGroup) => (
  {iGroup.itineraryDetails.map((idetail, index) => ( 
    <FieldArray
      name={`itineraryGroups[${indexGroup}].itineraryDetails[${index}].itinerary`}

Formik fieldarray 名称嵌套三层深

Formik fieldarray name nested three levels deep

javascript

reactjs

formik

string-interpolation