javascript - React Material-UI slider 值不断重置为零

Question

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

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

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

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

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

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

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

然后，在包含 slider 的子组件中，在该组件中使用 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 方法，则 slider 将再次工作。我也尝试将 handleChange 移动到父级，但这没有帮助。

创建此沙箱后，我似乎遇到了一个零星的新问题，而且我不清楚复制出现错误的位置的步骤:无法读取 null 属性“getBoundingClientRect”

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

=============更新:更接近预期并且出现新问题=============

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

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

Answer 1

问题的根源在于组件 RenderSwitch 是在 AddActivitySelect (SelectForm) 组件内创建(声明)的。将 RenderSwitch 移到外部并传递所有必要的 Prop 可以解决问题。这是一个工作codesandbox .

发生了什么:

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