有没有办法通过单击按钮从数组中删除组件？

Question

仍然很新的反应，如果这个问题看起来很简单，很抱歉。

我目前遇到的问题是，每次单击添加按钮时我都尝试添加一个组件（这有效），但是当我按下删除按钮时，它会删除数组中除第一个之外的所有组件似乎无法删除。 我正在使用 .splice() 尝试删除数组中的最后一个元素 (-1) 并设置新的 state 以反映这一点，但我所做的一切似乎都没有解决任何问题。 任何投入将不胜感激！

function App() {
  const [inputList, setInputList] = useState([]);
  const [disabled, setDisabled] = useState(false);

  const onAddBtnClick = event => {
    if (inputList.length < 5){
      setInputList(inputList.concat(<Autocomplete items={universities} />));
    }else{
      setDisabled(true);
    }
  };

  const onDeleteBtnClick = event => {
    setInputList(inputList.splice(-1, 1));
    if (inputList.length < 5){
      setDisabled(false);
    }
  };

  return (
    <Fragment>
      <div className="autocompleter">
        <Button onClick={onAddBtnClick} disabled={disabled} size="lg" block>Add Education (Maximum 5)</Button> 
        <Button onClick={onDeleteBtnClick} size="lg" block>Delete Education</Button> 
        {inputList}
      </div>
    </Fragment>
  );
}

Answer 1

如果要删除最后一个元素，请使用 Array.splice(0,array.length-1)。 这将删除您的最后一个元素。 希望这可以帮助。 在您的情况下，请使用此代码块。

setInputList(prev=>prev.splice(0,prev.length-1));

Answer 2

您的问题是 splice 不会返回新的 object，它会返回已删除的元素。 所以你设置了错误的新 state。

看看这里，你可以用slice代替