Question

我想从数组中删除最后一个项目并重新渲染，但是如果不使用过滤器，我似乎无法使其正常工作。但是在我的情况下，我认为不需要过滤器，因为我将始终带走最后一项，因此我使用pop（）

const CustomInput = (): JSX.Element => {
  const [inputValue, setInputValue] = useState<string>("");
  const [items, setitems] = useState<string[]>(['1', '2']);

  const handleKeyDown = (e: any) => {

    if (items.length && e.keyCode === 8 && inputValue === "") {
      const newitems = items;
      newitems.pop();

      /* what is wrong here */
      console.log('newitems', newitems)

      setitems(newitems);
    }
  };

  const handleChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
    const target = e.target as HTMLInputElement;
    setInputValue(target.value);
  };


  return (
    <div>
      {items.map((oo, index) => (
        <div >
          <span>
            {oo}
          </span>
        </div>
      ))}
      <input
        autoFocus
        type="text"
        value={inputValue}
        onKeyDown={handleKeyDown}
        onChange={handleChange}
      />
    </div>
  );
};

https://stackblitz.com/edit/react-ts-hxzcpt

怎么了？

Answer 1

您正在直接更改状态。这是一个解决方案。

const newitems = [...items];
newitems.pop();

Answer 2

array::slice

您正在将相同的状态数组引用突变并保存回状态，这会被视为“非操作”，即数组引用相同，因此无法重新渲染。您可以使用slice将第0至倒数第二个元素复制到新的数组引用中，基本上是在每次回调调用时将“最后一个”元素“切片”。

const handleKeyDown = (e: any) => {

  if (items.length && e.keyCode === 8 && inputValue === "") {
    setitems(items.slice(0, -1)); // index 0 to last - 1
  }
};

从数组中删除最后一个项目并在响应中重新呈现失败

2 个答案: