从数组中删除最后一项并在反应中重新渲染失败

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