如何在反应钩子中正确更新状态答案

【问题标题】：How to update state properly in react hooks如何在反应钩子中正确更新状态
【发布时间】：2021-01-31 08:43:30
【问题描述】：

所以，问题是每当我按下删除按钮时，它只会删除删除最后一个输入和按钮，而不考虑索引。我试图将密钥更改为key={${index}${name}}`，但这不会很好，因为输入是可变的（在主代码中），这会让事情变得一团糟。如何根据索引正确删除？

function App() {
  const [names, setNames] = React.useState(["First", "Second",'third','fourth']);
  const onNameDelete = useCallback((index: number) => {
    setNames((prev) => {
      const name = names[index];
      return prev.filter(x => x != name);
    });
  }, [names]);

  return (
    <div>
      {names.map((name, index) => (
        <Child
          key={index}
          name={name}
          index={index}
          onDelete={onNameDelete}
        />
      ))}
    </div>
  );
}
interface ChildProps {
  name: string;
  index: number;
  onDelete: (index: number) => void;
}

export const Child: React.FC<ChildProps> = React.memo(
  ({ name, index, onDelete }) => {
    return (
      <div>
        <input
          defaultValue={name}
        />
        <button onClick={() => onDelete(index)}>delete</button>
      </div>
    );
  }

【问题讨论】：

标签： javascript reactjs typescript react-native

【解决方案1】：

这里是：

function App() {
  const [names, setNames] = React.useState(
    ["First", "Second",'third','fourth'].map((name, index) => ({ id: index, name }))
  );
  const onNameDelete = useCallback((index: number) => {
    setNames((prev) => prev.filter({ id } => id !== index));
  }, [names]);

  return (
    <div>
      {names.map(({ id, name }) => (
        <Child
          key={id}
          name={name}
          index={id}
          onDelete={onNameDelete}
        />
      ))}
    </div>
  );
}
interface ChildProps {
  name: string;
  index: number;
  onDelete: (index: number) => void;
}

export const Child: React.FC<ChildProps> = React.memo(
  ({ name, index, onDelete }) => {
    return (
      <div>
        <input
          defaultValue={name}
        />
        <button onClick={() => onDelete(index)}>delete</button>
      </div>
    );
  }

请不要使用数组来存储名称，而是使用对象数组：

const [names, setNames] = React.useState(
    ["First", "Second",'third','fourth'].map((name, index) => ({ id: index, name }))
  );

【讨论】：