Javascript 有没有办法在不使用setState的情况下重新呈现功能性React.js组件？

我有一个功能性的React组件，需要在我更改滑块位置后重新加载。因为我使用Redux来处理我的状态，所以我不需要使用React，因为对我来说，这是一种解决问题的黑客方式。有没有一种真正的方法可以在不将我的组件转换为经典组件的情况下，重新加载所述组件

import React from "react";
import { Radio, RadioGroup } from "@material-ui/core";
import Slider from "@material-ui/lab/Slider";

const consoleLog = e => {
  console.log(e.target.name, ": ", e.target.value);
};

const handleData = question => {
  switch (question.type) {
    case "fv":
      return (
        <p
          className="range-field"
          style={{ width: 25 + "%", margin: 25 + "px" }}
        >
          <Slider
            value={25}
            min={question.min}
            max={question.max}
            onChange={consoleLog}
          />
        </p>
      );
  }
};

const Answers = props => {
  return <div>{handleData(props.data)} </div>;
};

export default Answers;

从“React”导入React；
从“@material ui/core”导入{Radio，RadioGroup}；
从“@material ui/lab/Slider”导入滑块；
const consoleLog=e=>{
log（e.target.name，“：”，e.target.value）；
};
const handleData=问题=>{
开关（问题类型）{
案例“fv”：
返回(


);
}
};
const Answers=props=>{
返回{handleData（props.data）}；
};
导出默认答案；

您可以使用forceUpdate方法强制重新加载

---

文档：

滑块位置实际上是一种状态。UI组件（

滑块

）是无状态的，并且期望父组件（

应答

）使用单向数据流处理其状态

在最好将UI状态保存为全局状态的情况下，可以使用Redux来处理滑块状态

否则，应使用本地状态。一个组件可以转换成一个组件来使用

setState

，使用它并不困难，因为这实际上是一种状态。或功能部件可使用React 16.8挂钩：

const Answers = props => {
    const [slide, setSlide] = useState(25);
    const onChange = useCallback(e => setSlide(e.value), []);
    const handleData = question => {
      switch (question.type) {
        case "fv":
          return (
            <p
              className="range-field"
              style={{ width: 25 + "%", margin: 25 + "px" }}
            >
              <Slider
                value={slide}
                min={question.min}
                max={question.max}
                onChange={onChange}
              />
            </p>
          );
      }
    };

    return <div>{handleData(props.data)} </div>;
};

const Answers=props=>{
常数[滑动，设置滑动]=使用状态（25）；
const onChange=useCallback（e=>setSlide（e.value），[]）；
const handleData=问题=>{
开关（问题类型）{
案例“fv”：
返回(


);
}
};
返回{handleData（props.data）}；
};

---

当

useState

在组件渲染之间保留滑块状态时，

useCallback

防止不必要的

slider

重新渲染。

解决了这个问题！所以我使用了React钩子，但是因为我使用的是materialui，所以我发现值是在事件旁边传递的。因此，使用estus提供的代码，我在onChange函数中添加了值作为额外参数，以便获得我的值

const Answers = props => {
const [slide, setSlide] = useState(props.data.min);
const onChange = useCallback((e, value) => setSlide(value), []);
const handleData = question => {
  switch (question.type) {
    case "fv":
      return (
        <p
          className="range-field"
          style={{ width: 25 + "%", margin: 25 + "px" }}
        >
          <Slider
            value={slide}
            min={question.min}
            max={question.max}
            onChange={onChange}
          />
        </p>
      );
  }
};

return <div>{handleData(props.data)} </div>;
};

const Answers=props=>{
const[slide，setSlide]=使用状态（props.data.min）；
const onChange=useCallback（（e，value）=>setSlide（value），[]）；
const handleData=问题=>{
开关（问题类型）{
案例“fv”：
返回(


);
}
};
返回{handleData（props.data）}；
};

您的组件未连接到Redux。因此，如果redux状态更改，它将不会更新…当状态更改或收到新道具时，组件将重新渲染。我实际上取出了它分派的部分，所以我们可以这么说。您可以使用react挂钩，但这不是推荐的。不幸的是，这似乎不起作用。当我移动滑块时，滑块值变为未定义。它最初是通过更改起始值来工作的，但当我更改该值时，它将变得未定义。错误：“属性

值

在

滑块

中标记为所需，但其值为

未定义

”。