setState 없이 기능적인 Resact.js 구성 요소를 다시 렌더링할 수 있는 방법이 있는가?

setState 없이 기능적인 Resact.js 구성 요소를 다시 렌더링할 수 있는 방법이 있는가?

슬라이더의 위치를 변경한 후 리뉴얼해야 하는 기능 Resact 구성 요소가 있다.나는 Redex를 사용하여 내 상태를 관리하고 있기 때문에 React's를 사용할 필요가 없다. 왜냐하면 나에게 있어 그것은 내 문제를 해결하는 다소 진부한 방법이 될 것이기 때문이다.변경에 대해 언급된 구성요소를 클래식 구성요소로 변환하지 않고 리렌더할 수 있는 실제 방법이 있는가?

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;

슬라이더 위치는 실제로 상태임.UI 구성 요소(Slider)은 상태 비저장이며 상위 구성 요소(Answers)는 단방향 데이터 흐름으로 상태를 처리한다.

UI 상태를 글로벌 상태로 저장하는 것이 더 바람직한 경우, Redex를 사용하여 슬라이더 상태를 처리할 수 있다.

그렇지 않으면 국부 상태를 사용해야 한다.구성 요소를 사용할 구성 요소로 변환할 수 있음setState이것은 실제로 주(州)이기 때문에 그것을 사용하는 것은 진부하지 않다.또는 기능 구성 요소에서 반응 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>;
};

어디에useState구성 요소 렌더 간에 슬라이더 상태 유지useCallback불필요한 것을 방지하다Slider렌더링하다

forceUpdate 메소드를 사용하여 강제로 렌더링할 수 있다.

설명서: https://facebook.github.io/react/docs/component-api.html

알아냈어!그래서 리액션 후크를 사용하지만 재료의의를 사용하다 보니 이벤트와 함께 값이 전달된다는 것을 알게 되었다.그래서 에스테스가 제공하는 코드를 사용하여, 나는 값을 얻을 수 있도록 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>;
};

참조URL: https://stackoverflow.com/questions/54765043/is-there-a-way-to-re-render-a-functional-react-js-component-without-setstate