React使用Material-UI Slider时输入框清空后出现不可删0如何解决

• 空值强制类型转换错误：输入框内容被清空时target.value为空字符串，代码中使用+target.value做强制数字转换时，空字符串会被转为数字0，直接导致输入框自动填充0且无法删除。
• useState异步更新逻辑问题：setValue是异步方法，调用后立即执行setValue1(value)时，状态还未完成更新，传递给父组件的永远是旧值，进一步加剧状态不同步。
• Slider组件数值校验规则：Material UI的Slider组件要求绑定值为合法数字，当传入空字符串等非法值时，组件会自动将其转换为符合min配置的默认值，也会触发输入框显示0。

1. 输入框空值特殊处理：内容清空时直接存储空字符串，不做强制数字转换
2. 修正状态同步逻辑：更新状态时直接把新计算好的值同时传给setValue和setValue1，避免依赖异步更新后的状态
3. 适配Slider组件规则：给Slider传值时单独处理空值，将空值替换为Slider的min值，避免组件自动校正导致的状态异常

import Slider from '@material-ui/core/Slider';
import { useLocation } from 'react-router-dom';
import { useState, useEffect } from 'react';

export default function RangeSlider({setValue1}) {
  const location = useLocation();
  const classes = useStyles();
  const [value, setValue] = useState(['', 150000]);
  
  const handleChange = (event, newValue) => {
    setValue(newValue);
    setValue1(newValue);
  };

  useEffect(() => {
    const resetValue = ['', 150000];
    setValue(resetValue);
    setValue1(resetValue);
  }, [location.search, setValue1]);

  // 适配Slider的数值要求，空值替换为min配置值1
  const sliderValue = [
    value[0] === '' ? 1 : value[0],
    value[1]
  ];

  return (
    <div className={`filter-slider-wrapper ${classes.root} `}>
      <p>
        <input
          type="number"
          className="slider-input"
          onChange={({target}) => {
            if (target.value.length > 7) {
              return false;
            }
            const newFirstVal = target.value === '' ? '' : +target.value;
            const newValue = [newFirstVal, value[1]];
            setValue(newValue);
            setValue1(newValue);
          }}
          value={value[0]}
        />
      </p>
      <Slider value={sliderValue} onChange={handleChange} min={1} max={150000} />
      <p>
        <input
          type="number"
          className="slider-input"
          onChange={({target}) => {
            if (target.value.length > 7) {
              return false;
            }
            const newSecondVal = target.value === '' ? '' : +target.value;
            const newValue = [value[0], newSecondVal];
            setValue(newValue);
            setValue1(newValue);
          }}
          value={value[1]}
        />
      </p>
    </div>
  );
}

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