React useState存储动态输入框值重复追加问题解决方案

现有代码存在4个问题导致输出不符合预期：

• 初始状态默认写入了一条空值{value:'', product_id:''}冗余数据，无空值需求时初始值直接设为空数组即可
• 输入变更逻辑是直接将新值追加到数组末尾，没有对相同product_id的历史记录做去重替换，每次输入都会新增一条重复id的历史条目
• React的state更新是异步的，在调用setFilteredValuesSlider之后立刻打印state，拿到的是更新前的旧值，要观测最新状态需要用useEffect监听state变化
• 动态列表渲染未给根节点加唯一key属性，会触发React渲染警告，建议补上

const [filteredValuesSlider, setFilteredValuesSlider] = React.useState([]);

const changeFilteresValuesFromSlider = (value, product_id) =>{
  setFilteredValuesSlider((prevValues) => {
    // 先移除当前product_id对应的旧记录，再追加最新输入值，自动实现同id只保留最新值
    const existedValues = prevValues.filter(item => item.product_id !== product_id);
    return [...existedValues, { value, product_id }]
  });
}

// 监听state变化打印最新值
React.useEffect(() => {
  console.log(filteredValuesSlider);
}, [filteredValuesSlider])

// 渲染部分
{filterListDataName && ( 
  filterListDataName.map((item) => {
    // 从state中匹配当前输入框对应的值，做受控绑定避免输入值和状态不同步
    const inputValue = filteredValuesSlider.find(v => v.product_id === item.id)?.value || '';
    return (
          <div className='mt-1 form-content' key={item.id}>
            <input 
              type="text" 
              placeholder="insert number" 
              value={inputValue}
              onChange={(e) => changeFilteresValuesFromSlider(e.target.value, item.id)}
            />
          </div>
    );
  }))}

修改后输入时，相同product_id的旧值会被自动替换，最终state数组里每个id只会保留最后一次输入的最新值，和预期的2条数据结果完全一致。

内容的提问来源于stack exchange，提问作者user19364233