reactjs - 如何使用 Formik 管理嵌套的复杂对象

Question

我使用 Formik 库来处理嵌套对象。所以，我在 FormArray 中尝试了 FormArray 但它没有正确渲染。我该如何解决？

尝试了各种方法来处理我拥有的嵌套对象，但问题是 Field 没有按照我的意愿进行渲染。

import React from "react";
import { Formik, Form, Field, FieldArray } from "formik";

// Here is an example of a form with an editable list.
// Next to each input are buttons for insert and remove.
// If the list is empty, there is a button to add an item.
const FriendList = () => (
  <div>
    <h1>Friend List</h1>
    <Formik
      initialValues={{ 
        subSkillName: "",
        queries: [
            {
                query: "",
                intent: '',
                entities: [{

                    entityName: "",
                    entityValue: '',


                }]

            }
        ] }}
      onSubmit={values =>
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
        }, 500)
      }
      render={({ values }) => (
        <Form>
            <Field name='subSkilName' placeholder='subskillname'></Field>
          <FieldArray
            name="queries"
            render={arrayHelpers => (
              <div>
                {values.queries && values.queries.length > 0 ? (
                  values.queries.map((friend, index) => (
                    <div key={index}>
                        <label>subskillname</label>
                      <Field name={`queries.${index}.query`} placeholder='query'/>
                      <Field name={`queries.${index}.intent`} placeholder='intent'/>

                      <FieldArray name={`queries.${index}.entities`}
                      render={arrayHelpers => (
                          <div>
                               {(values.queries[index]).entities && (values.queries[index]).entities.length > 0 ? (
                                  (values.queries[index]).entities.map((entity, entityindex) => {
                                    <div key={entityindex}>
                                        {console.log('came to the entity')}

                                       <Field name={`queries.${index}.entities.${entityindex}.entityName`} ></Field>

                                   </div>
                                  })

                               ):(<button type="button" onClick={() => arrayHelpers.push({

                                entityName: "",
                                entityValue: '',


                            }
                        )}>
                        {/* show this when user has removed all friends from the list */}
                        Add a queries
                      </button>) }
                          </div>


                      )}
                      >


                      </FieldArray>

                      <button
                        type="button"
                        onClick={() => arrayHelpers.remove(index)} // remove a friend from the list
                      >
                        -
                      </button>
                      <button
                        type="button"
                        onClick={() => arrayHelpers.push({


                                    query: "",
                                    intent: '',
                                    entities: []

                                }
                            )} // insert an empty string at a position
                      >
                        +
                      </button>
                    </div>
                  ))
                ) : (
                  <button type="button" onClick={() => arrayHelpers.push({

                            query: "",
                            intent: '',
                            entities: []

                        }
                    )}>
                    {/* show this when user has removed all friends from the list */}
                    Add a queries
                  </button>
                )}
                {/* <div>
                  <button type="submit">Submit</button>
                </div> */}
              </div>
            )}
          />
           <div>
                  <button type="submit">Submit</button>
                </div>
        </Form>
      )}
    />
  </div>
);

export default FriendList;

在这里我想显示实体名称(查询>>实体>>实体名称)但它不会呈现该文件。如何使用 Formik 访问另一个数组中的数组？

Answer 1

这是一个工作示例
您的代码很好，只需重命名 map 函数的第二个参数(索引)

<div className="at-createsurvey">
    <Formik
      enableReinitialize
      initialValues={{
        surveyName: "",
        description: "",
        startDate: Date.now(),
        endDate: Date.now(),
        questions: [
          {
            title: "",
            questionType: "ShortAnswer",
            answers: [
              {
                text: "",
              },
            ],
          },
        ],
      }}
      onSubmit={(values) => console.log(values)}
      validationSchema={surveySchema}
    >
      {({ values, handleSubmit, handleChange, setValues }) => (
        <form>
          <div className="at-container">
            <div className="at-pageheading">
              <div className="at-title">
                <Link
                  to="/tribe-details"
                  className="at-roundicon at-backbtn"
                >
                  <i className="icon-angle-left"></i>{" "}
                </Link>
                <h2>back</h2>
              </div>
              <div className="at-right">
                <div className="at-datearae">
                  <div className="at-datebox">
                    <span>Start date</span>
                    <DatePicker
                      selected={startDate}
                      onChange={(date) => setStartDate(date)}
                    />
                  </div>
                  <div className="at-datebox">
                    <span>End date</span>
                    <DatePicker
                      selected={endDate}
                      onChange={(date) => setEndDate(date)}
                    />
                  </div>
                </div>
              </div>
            </div>
            <form className="at-themeform at-surveyform">
              <div className="at-surveycontent">
                <div className="at-surveyname-box">
                  <input
                    type="text"
                    className="form-control"
                    placeholder="Survey name type here..."
                    name="surveyName"
                    onChange={handleChange}
                    //   value={values.surveyName}
                  />
                  <textarea
                    className="form-control"
                    placeholder="description"
                    name="description"
                    onChange={handleChange}

                    //   value={values.description}
                  ></textarea>
                </div>

                <div className="at-surveyquestion-area">
                  <FieldArray name="questions">
                    {(arrayHelper) => (
                      <div className="at-heading">
                        <button
                          type="button"
                          className="at-roundicon"
                          onClick={() => {
                            arrayHelper.push({
                              title: "",

                              answers: [
                                {
                                  text: "",
                                },
                              ],
                              questionType: "SingleChoice",
                            });
                          }}
                        >
                          <i className="icon-plus"></i>
                        </button>
                        <h3>Add New Question</h3>
                      </div>
                    )}
                  </FieldArray>

                  {values.questions.map((question, i) => (
                    <div className="at-surveyquestion-box">
                      <input
                        type="text"
                        className="form-control"
                        placeholder="Question..."
                        name={`questions.${i}.title`}
                        onChange={handleChange}
                      />

                      <ul
                        className={`at-surveyoption ${getClassName(
                          question.questionType
                        )}`}
                      >
                        {question.answers.map((answer, index) => (
                          <li key={index}>
                            <div className="at-inputbox">
                              <Answer
                                name={`questions.${i}.answers.${index}.text`}
                                value={answer.text}
                                answerType={question.questionType}
                                onChange={handleChange}
                              />
                            </div>
                            <button type="button" className="at-closebtn">
                              <i className="icon-close"></i>
                            </button>
                          </li>
                        ))}
                      </ul>

                      <button
                        type="button"
                        className="at-addbtn"
                        onClick={() => {
                          question.answers.push({ text: "" });
                          setValues(values);
                        }}
                      >
                        <i className="icon-plus"></i> add option
                      </button>

                      <div className="at-actionarea">
                        <div className="at-select">
                          <select
                            name={`questions.${i}.questionType`}
                            //   value={question.questionType}
                            onChange={handleChange}
                          >
                            <option value="SingleChoice">
                              Single Choice
                            </option>
                            <option value="MultipleChoice">
                              Multiple Choice
                            </option>
                            <option value="ShortAnswer">
                              Short Answer
                            </option>
                          </select>
                        </div>
                        <div className="at-actionbox">
                          <button type="button">
                            <i className="icon-copy"></i>
                          </button>
                          <button
                            type="button"
                            onClick={() => {
                              values.questions.pop();
                              setValues(values);
                            }}
                          >
                            <i className="icon-delet"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="at-surveydateview">
                <div className="at-head">
                  <h3>1 Question</h3>
                </div>
                {/* <figure className="at-nosurveyimg">
                                  <img src={images.nosurveydata} alt="images description"/>
                              </figure>
                              <span>Create your new survey here</span> */}
                <div className="at-surveyquestion-data">
                  {JSON.stringify(values, null, 2)}
                  <h3>1) Please select your age group</h3>
                  <ul className="at-surveyquestion-list">
                    <li>
                      <label className="at-customcheckbox">
                        <input type="checkbox" className="form-control" />
                        <em className="at-checkmark"></em>
                      </label>
                      <span>Under 18</span>
                    </li>
                    <li>
                      <label className="at-customradio">
                        <input
                          type="radio"
                          name="radio"
                          className="form-control"
                        />
                        <em className="at-checkmark"></em>
                      </label>
                      <span>option1</span>
                    </li>
                    <li>
                      <label className="at-customradio">
                        <input
                          type="radio"
                          name="radio"
                          className="form-control"
                        />
                        <em className="at-checkmark"></em>
                      </label>
                      <span>option2</span>
                    </li>
                    <li>
                      <input
                        type="text"
                        className="form-control"
                        placeholder="Short Line Answer"
                      />
                    </li>
                  </ul>
                </div>
                <div className="at-btnarea">
                  <button type="button" className="at-btn">
                    Publish
                  </button>
                  <button type="button" className="at-btn green">
                    Save
                  </button>
                  {/* <button
                    type="button"
                    className="at-btn red"
                    onClick={handleShow}
                  >
                    Delete
                  </button> */}
                </div>
              </div>
            </form>
          </div>
        </form>
      )}
    </Formik>
  </div>