删除材料ui芯片输入中的元素时出现问题答案

【问题标题】：Problem when deleting an element in material ui chip input删除材料ui芯片输入中的元素时出现问题
【发布时间】：2021-09-03 16:17:17
【问题描述】：

我希望能够限制芯片输入中的标签数量，这个已经解决了，但是现在如果我想删除一个芯片，直到我再次点击输入时它似乎没有被删除

这是我目前的代码

var chips = []
<ChipInput
        value={chips}
        placeholder={'Escribe'}
        size={'medium'}
        variant={'outlined'}
        inputMode={'url'}
        onAdd={(chip) => handleAddChip(chip)}
        onDelete={(chip, index) => {chips.pop(index)}}
            />

使用此功能我只能输入 3 个元素

const handleAddChip = (chip) =>{
  if(chips.length <= 2){
    chips.push(chip)
  }
}

所以问题是当我删除一个时，它不会删除它，直到我再次点击芯片输入

【问题讨论】：

标签： reactjs material-ui material-design

【解决方案1】：

您应该将您的芯片阵列移动到您的反应状态。在您的渲染方法中使用的任何动态数据都应该是您的状态的一部分。当你更新你的状态时，react 会重新渲染。如果您不将此数据作为您的状态的一部分，react 将不会知道它需要重新渲染您的组件，因此您将看到陈旧的数据，直到其他东西触发重新渲染。

或者，您可以在修改芯片数组后调用this.forceUpdate()。但是，不建议这样做。

状态示例：

this.state = {
    chips: []
};

...

const handleAddChip = (chip) =>{
  if(this.state.chips.length <= 2) {
    this.setState({
      chips: [...this.state.chips, chip] //shorthand way to copy an array and add a new element
    });
  }
}

const handleRemoveChip = (chip) => {
  this.setState({
    chips: this.state.chips.filter(c => c != chip) //filter will produce a copy of the array
  });
}

以上代码适用于基于类的组件。

如果您使用的是基于函数的组件，您可以通过引入useState 挂钩来实现相同的目的。

function MyComponent() => {
  var [chips, setChips] = useState([]);

  const handleAddChip = (chip) => {
    if(chips.length <= 2) {
      setChips(
        [...chips, chip] //shorthand way to copy an array and add a new element
      );
    }
  }

  const handleRemoveChip = (chip) => {
    setChips(
      chips.filter(c => c != chip) //filter will produce a copy of the array
    );
  }

  return <ChipInput /* ... */ />
}

这是所有可能有错误的未经测试的代码，但至少应该是一个体面的指南。

【讨论】：