时间戳

首页 > 解决方案 > 已解决：React Hook useEffect - 重新渲染/重置问题

reactjs - 已解决：React Hook useEffect - 重新渲染/重置问题

问题描述

我正在尝试创建一个重置按钮，它会更改 useEffect 中依赖项的值。我认为这会重新渲染组件，从而将所有值设置为代码中显示的默认值。

 const TransformedDoor = ({ doorHook }) => {
  const { selectedDoor } = doorHook;
  const [ doorWidth, setDoorWidth ] = useState(0);
  const [ doorHeight, setDoorHeight] = useState(0);
  const [ reset, doReset ] = useState(0);

  const DEFAULT_MATRIX = [1.0,0.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,0.0,1.0];
  const [ transformationMatrix, setTransformationMatrix] = useState(DEFAULT_MATRIX);
  const [ doorOffset, setDoorOffset ] = useState({x: 300,y: 200});
  const [ mouseState, setMouseState ] = useState({targetCircle: -1});
  const [ corners, setCorners ] = useState(
    {
     0: {x: 0, y: 0},
     1: {x: doorWidth, y: 0},
     2: {x: doorWidth, y: doorHeight},
     3: {x: 0, y: doorHeight},
    }
  );

  useEffect(() => {
    const { width, height } = selectedDoor;
    const scaler = 200 / Math.max(width, height);
    const w = width * scaler;
    const h = height * scaler;
    if (w !== doorWidth || h !== doorHeight) {
      setDoorWidth(w);
      setDoorHeight(h);
      setCorners({
        0: {x: 0, y: 0},
        1: {x: w, y: 0},
        2: {x: w, y: h},
        3: {x: 0, y: h},
      });
      setTransformationMatrix(DEFAULT_MATRIX);
    }
    console.log(reset + "reset")
  }, [selectedDoor, reset]);

这是我正在更新的钩子：

const [ reset, doReset ] = useState(0);

这是在 useEffect 的依赖项中更改值的按钮。它改变了 [reset] 的值

<button
   onClick={() => {
     doReset(prev => prev + Math.random());
    }}> Reset </button>

编辑：解决了！

我编辑了 if 语句以监听新的重置值，这触发了所需的操作。

 useEffect(() => {
    const { width, height } = selectedDoor;
    const scaler = 200 / Math.max(width, height);
    const w = width * scaler;
    const h = height * scaler;
    if (w !== doorWidth || h !== doorHeight || reset !== 0) {
      setDoorWidth(w);
      setDoorHeight(h);
      setCorners({
        0: {x: 0, y: 0},
        1: {x: w, y: 0},
        2: {x: w, y: h},
        3: {x: 0, y: h},
      });
      setTransformationMatrix(DEFAULT_MATRIX);
      setReset(0);
    }
    console.log(reset + "reset")
  }, [selectedDoor, reset]);

标签： reactjsdependenciesreact-hooksuse-effect

解决方案

尝试按照文档建议将doReset重命名为setReset

推荐阅读