Javascript 反应材质UI滑块值保持重置为零

我正在建立一个界面，你可以选择一个收音机，它将显示不同的形式元素

当显示滑块时，值更改将设置到页面上呈现的对象中

在本例中，我有它，因此它确实会更新对象，但滑块不再移动，即使在单击直线时正确设置了值

我正在设置的对象在父对象中声明：

  const defaultActivity = {
    group: "",
    a: 0,
    b: 0
  };

  const [activity, setActivity] = useState(defaultActivity);

然后在包含滑块的子组件中，

handleChange

函数在该组件中使用，我还使用父函数访问

setActivity

const TestSlider = (props) => {
  const [value, setValue] = React.useState(0);
  const handleChange = (event, newValue) => {
    setValue(newValue);

// This sets the slider value to the activity object
// if you comment this line out then the sliders slide correctly

props.onDataChanged(props.name.toLowerCase(), newValue);

  };
  return (
    <React.Fragment>
      <Typography id="discrete-slider" gutterBottom>
        {props.name}
      </Typography>
      <Slider
        value={value}
        aria-labelledby="discrete-slider"
        valueLabelDisplay="auto"
        step={props.step}
        marks
        min={0}
        max={props.max}
        name={props.name}
        onChange={handleChange}
      />
    </React.Fragment>
  );
};

正如我在评论中所指出的，如果删除

onDataChanged

方法，滑块将再次工作。我也尝试过将

handleChange

移动到父级，但没有帮助

创建此沙箱后，我似乎遇到了一个新问题，这是一个零星的问题，我不清楚复制错误的步骤：

无法读取null的属性“getBoundingClientRect”

可能与滑块断裂或其他我搞砸的事情有关。提前感谢你在这方面的帮助，我正在努力学习如何应对，但这个问题让我很困惑

===================更新：更接近预期，出现新问题=================

仍然在玩这个，并决定尝试在滑块上使用

onChangeCommitted

，尝试断开滑块中设置的值与主对象的连接。现在，它会滑动并更新固定在对象中的值，但滑块UI会重置为0。很难解释，所以如果你去玩，看看我的意思，可能会更容易。我认为我设置默认状态的方式可能是问题所在，但不确定如何重构：

---

问题的根源在于组件

RenderSwitch

是在

AddActivitySelect

（

SelectForm

）组件内创建（声明的）。将

RenderSwitch

移出并传递所有必要的道具可以解决问题。这是一张工作票

发生了什么：

• 当您在

  TestSlider

  中调用

  props.setActivity

  时，

  activity

  状态在

  App

• App

  重新渲染，这会导致

  SelectForm

  也重新渲染
• 由于在

  SelectForm

  中创建了一个全新的

  RenderSwitch

  组件，因此上一个组件已卸载（销毁）
• 新的

  RenderSwitch

  被呈现，调用

  React.useState（0）

  ，这就是滑块

  值为0的原因

  const onDataChanged = (name, value) => {
    setActivity({
      ...activity,
      [name]: value
    });
  };