Material UI ChipInput组件删除元素后未即时更新问题求助

问题原因 #

• 你没有将chips声明为React响应式状态，直接修改普通变量无法触发组件重渲染，只有组件自身交互（比如点击输入框）触发更新时才会读取到最新的变量值
• 你对数组调用的push、pop都是原地修改方法，没有生成新的数组引用，哪怕chips是状态，直接原地修改也不会触发重渲染
• 额外说明：数组pop()方法不接收参数，只会删除数组最后一个元素，你之前写的chips.pop(index)逻辑本身是错误的，无法删除指定下标的chip

修复方案 #

将chips改为React响应式状态，所有修改数组的操作都生成新数组再更新状态即可，完整代码示例如下：

// 组件顶部引入useState
import { useState } from 'react'

// 组件内声明响应式状态
const [chips, setChips] = useState([])

const handleAddChip = (chip) => {
  // 最多3个标签，满足条件时生成新数组更新状态
  if(chips.length < 3) {
    setChips(prevChips => [...prevChips, chip])
  }
}

// 组件渲染部分
<ChipInput
  value={chips}
  placeholder={'Escribe'}
  size={'medium'}
  variant={'outlined'}
  inputMode={'url'}
  onAdd={(chip) => handleAddChip(chip)}
  // 删除指定下标的chip，生成新数组更新状态
  onDelete={(chip, index) => {
    setChips(prevChips => prevChips.filter((item, i) => i !== index))
  }}
/>

内容的提问来源于stack exchange，提问作者Jose A.