我正在做一棵家谱，可以将孩子们转移到其他父母那里。当我通过拖放（DnD）对系列重新排序时，问题就出现了，它在formik值对象中没有更新。同样，当我删除DnD上的一个子对象时，它不会更新DnD对象，而是更新formik值对象。

Codesandbox链接为：https://codesandbox.io/s/kind-hermann-lqve6 下面是代码：

import React,{ useState } from "react";
import ReactDOM from "react-dom";
import { Formik,FieldArray } from "formik";
import { Button,Form } from "antd";
import { DndProvider } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";
import Sortly,{ ContextProvider,useDrag,useDrop } from "react-sortly";

const FormItem = Form.Item;

const ItemRenderer = props => {
  const {
    index,data: { text,kids }
  } = props;
  const [,drag] = useDrag();
  const [,drop] = useDrop();

  return (
    <FieldArray
      name="family.parents"
      render={arrayHelpers => (
        <div ref={drop} style={{ width: "40vw" }} key={index}>
          <div
            ref={drag}
            style={{
              padding: "0.5rem 1rem",marginBottom: ".5rem",backgroundColor: "green",cursor: "move",color: "white",width: "320px"
            }}
          >
            {`${text}`}
            <FormItem style={{ display: "inline-block" }}>
              <span classname="parent-utility">
                <Button
                  classname="ant-btn"
                  shape="circle"
                  size="small"
                  style={{ color: "#ffa500" }}
                  onClick={() => arrayHelpers.remove(index)}
                >
                  Delete
                </Button>
              </span>
            </FormItem>
          </div>
          <KSortableTree kidsTree={kids} position={index} />
        </div>
      )}
    />
  );
};

const ItemRendererA = props => {
  const {
    index,position,data: { text }
  } = props;
  const [,drop] = useDrop();

  return (
    <FieldArray
      name={`family.parents[${position}].kids`}
      render={arrayHelpers => (
        <>
          <div ref={drop} style={{ width: "40vw" }}>
            <div
              ref={drag}
              style={{
                border: "1px dashed #70B5DC",padding: "0.5rem 1rem",marginLeft: "3rem",backgroundColor: "white",color: "#70B5DC",width: "17rem"
              }}
            >
              {`${text}`}
              <FormItem style={{ display: "inline-block" }}>
                <span classname="answer-utility">
                  <Button
                    classname="ant-btn"
                    shape="circle"
                    size="small"
                    style={{ color: "#ffa500" }}
                    onClick={() => {
                      arrayHelpers.remove(index);
                    }}
                  >
                    Delete
                  </Button>
                </span>
              </FormItem>
            </div>
          </div>
        </>
      )}
    />
  );
};

const PSortableTree = parentTree => {
  const [items,setItems] = useState(parentTree.parentTree);
  const handleChange = newItems => {
    setItems(newItems);
  };

  return (
    <Sortly items={items} onChange={handleChange}>
      {props => <ItemRenderer {...props} />}
    </Sortly>
  );
};

const KSortableTree = kidsTree => {
  const [itemsA,setItemsA] = useState(kidsTree.kidsTree);
  const [positionA] = useState(kidsTree.position);
  const handleChangeA = newItemsA => {
    setItemsA(newItemsA);
  };

  return (
    <Sortly items={itemsA} onChange={handleChangeA}>
      {props => <ItemRendererA {...props} position={positionA} />}
    </Sortly>
  );
};

function FormDetail({ values,handleSubmit }) {
  return (
    <form onSubmit={handleSubmit}>
      <h3>Family Tree</h3>

      <DndProvider backend={HTML5Backend}>
        <ContextProvider>
          <PSortableTree parentTree={values.family.parents} />
        </ContextProvider>
      </DndProvider>

      <div
        style={{
          padding: 16,backgroundColor: "lightgrey",borderRadius: "8px",marginTop: "20px",maxWidth: "100vw"
        }}
      >
        {JSON.stringify(values)}
      </div>
    </form>
  );
}

function App() {
  return (
    <Formik
      enableReinitialize
      initialValues={{
        family: {
          id: "2da80396",parents: [
            {
              depth: 0,id: "01a3b77c",kids: [
                {
                  depth: "1",id: "01a3b77d",text: "A",correct: true
                },{
                  depth: "1",id: "02fd6f62",text: "C",correct: false
                }
              ],text: "Parent 1"
            },{
              depth: 0,id: "773a4170",id: "773a4171",correct: false
                },id: "773a4172",text: "B",id: "773a4173",text: "Parent 2"
            },id: "a3652131",id: "1c081c33",text: "G",id: "a3654842",id: "a3654843",text: "Parent 3"
            },id: "a3654845",id: "a3654846",id: "a3654847",text: "Parent 4"
            },id: "eb3dc4d9",id: "2103b3bc",text: "D",id: "28650f35",id: "699584c2",id: "a9edd5c4",text: "Parent 5"
            }
          ],text: "Heading"
        }
      }}
      onSubmit={values => alert(JSON.stringify(values))}
      component={FormDetail}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);