React Material-UI 滑块值不断重置为零

Question

我正在构建一个界面，您可以在其中选择收音机，它将显示不同的表单元素。

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

在这个例子中，我有它，所以它确实更新了对象，但滑块不再移动，即使如果您单击该行，该值已正确设置。

https://codesandbox.io/s/shy-dawn-e5zyu

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

  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父级中的该方法

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

正如我在评论中指出的那样，如果您删除该onDataChanged方法，则滑块会再次工作。我也尝试过搬到handleChange父母那里，但这没有帮助。

创建此沙箱后，我似乎遇到了一个零星的新问题，并且我不清楚复制出现错误的位置的步骤： Cannot read property 'getBoundingClientRect' of null

可能与滑块损坏问题或我搞砸的其他问题有关。预先感谢您对此的任何帮助，我正在努力学习 React 的方法，但这个问题让我真的很难过。

=============更新：更接近预期和新问题=============

仍在尝试这个，并决定尝试onChangeCommitted在滑块上使用，以尝试断开滑块中设置的值与主对象的连接。现在它会滑动并更新粘在对象中的值，但滑块 UI 会重置为 0。很难解释，所以如果你去玩一下并明白我的意思，也许会更容易。我认为我设置默认状态的方式可能是问题所在，但不确定如何重构：

https://codesandbox.io/s/sleepy-euler-0dv69?file=/src/TestSlider.js:116-163

Answer 1

问题的根源在于组件是在( ) 组件RenderSwitch内部创建（声明）的。搬到外面并传递所有必要的道具可以解决问题。这是一个工作的codesandbox。AddActivitySelectSelectFormRenderSwitch

发生了什么：

• 当您调用props.setActivity时TestSlider，activity状态会更新App
• App重新渲染也会导致SelectForm重新渲染。
• RenderSwitch因为内部创建了一个全新的组件SelectForm，前一个组件被卸载（销毁）。
• 新的RenderSwitch被渲染，调用React.useState(0)，这就是滑块value为 0的原因