javascript - 如何在 react Hook 中正确更新状态

Question

所以，问题是每当我按下删除按钮时，它只会删除删除最后一个输入和按钮，而不考虑索引。我试图将 key 更改为 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>
    );
  }

Answer 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 }))
  );