有沒有辦法在沒有 setState 的情況下重新渲染功能性 React.js 組件？

Question

我有一個功能性 React 組件，需要在更改滑塊位置后重新渲​​染。 由於我使用 Redux 來處理我的狀態，我不應該需要使用 React 的，因為對我來說這將是一種解決我的問題的黑客方法。 有沒有一種實際的方法可以在不將我的組件轉換為經典組件的情況下重新渲染所述組件 onChange？

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;

Answer 1

滑塊位置實際上是一種狀態。 UI 組件 ( Slider ) 是無狀態的，並且期望父組件 ( Answers ) 使用單向數據流處理其狀態。

如果最好將 UI 狀態保存在全局狀態中，Redux 可用於處理滑塊狀態。

否則應該使用本地狀態。 一個組件可以轉換為一個組件來使用setState ，使用它並不難，因為這實際上是一個狀態。 或者功能組件可以使用 React 16.8 hooks：

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>;
};

useState在組件渲染之間保留滑塊狀態，而useCallback可防止不必要的Slider渲染。

Answer 2

您可以使用 forceUpdate 方法強制重新渲染。

文檔： https : //facebook.github.io/react/docs/component-api.html

Answer 3

弄清楚了！ 所以我使用 React 鈎子，但由於我使用的是 material-ui，我發現該值與事件一起傳遞。 因此，使用 estus 提供的代碼，我在 onChange 函數上添加了 value 作為額外參數，以便我可以獲得我的 value。

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>;
};