2

我有一个复杂的数据集，所以我将展示一个非常简化的版本作为示例。

输入数据：

const data = [
  {
    type: "input",
    caption: "Name",
    defaultValue: "John Smith"
  },
  {
    type: "input",
    caption: "Name",
    defaultValue: "John Smith"
  },
  {
    type: "input",
    caption: "Name",
    defaultValue: "John Smith"
  },
  {
    type: "input",
    caption: "Name",
    defaultValue: "John Smith"
  },
  {
    type: "input",
    caption: "Name",
    defaultValue: "John Smith"
  }
];

数组中的每一项都是可移除的。结果是这样的。

在此处输入图像描述

有几个条件。我不应该修改数据数组，所以我创建了一个深层副本。同样在副本内部，我只能删除元素，但不能修改它们的属性。因此，每个元素都必须具有具有新值的本地状态。

工作示例：

function App() {
  const [mainData, setMainData] = useState(deepCopy(data));

  return (
    <React.Fragment>
      {
        mainData.map((item, i) => {
          return (
            <Input {...item} key={i} num={i} setMainData={setMainData}/>
          )
        })
      }
    </React.Fragment>
  )
}

const Input = (props) => {
  const [value, setValue] = useState(props.defaultValue);

  const deleteElem = () => {
    props.setMainData((mainData) => {
      return [...mainData.filter((_, ind) => ind !== props.num)];
    });
  };

  return (
    <div>
      <div>
        <div>{`${props.caption}:`}</div>
        <input value={value} onChange={(e)=>setValue(e.target.value)}/>
      </div>
      <button onClick={deleteElem}>delete</button>
    </div>
  )
};



const deepCopy = (aObject) => {
  if (!aObject) {
    return aObject;
  }
  let value;
  let bObject = Array.isArray(aObject) ? [] : {};

  for (const key in aObject) {
    value = aObject[key];
    bObject[key] = (typeof value === "object") ? deepCopy(value) : value;
  }

  return bObject;
};

如果您尝试删除不是最后一个元素，那么（由于键）输入元素的值将被混淆。我能做些什么呢？

4

2 回答 2

3

当deepCopy您初始化您的状态时，您可以为每个项目添加一个唯一的 id。完成此操作后，您可以利用该 id 作为键传递给 Input 元素

import {uuid} from 'uuidv4';
function deepCopyAndAddId = () => {
   let newData = deepCopy(data);
   newData = newData.map((item, index) => ({...item, id: uuid()})); 
}
function App() {
  const [mainData, setMainData] = useState(deepCopyAndAddId);

  return (
    <React.Fragment>
      {
        mainData.map((item, i) => {
          return (
            <Input {...item} key={item.id} num={i} setMainData={setMainData}/>
          )
        })
      }
    </React.Fragment>
  )
}
于 2020-05-22T10:05:03.900 回答
1

要对代码进行最少的更改 - 永远不要删除 中的项目deleteElem，而是添加一个标志deleted。

渲染项目时，显示<Fragment>该deleted项目。

于 2020-05-22T10:18:46.163 回答