React - 2 个相互依赖的输入字段 - 无限循环答案

【问题标题】：React - 2 input field dependent on each other - infinite loopReact - 2 个相互依赖的输入字段 - 无限循环
【发布时间】：2021-09-01 14:06:38
【问题描述】：

需要帮助，我需要在 React 中创建简单的纵横比计算器，用户可以在其中选择图像宽度或高度。如果宽度输入字段改变它会更新它的状态，当高度改变它会更新高度状态。

我的代码进入循环，当我输入宽度时，useEffect 监听它并更新高度等等。

我还想在初始渲染时跳过 useEffect。接受任何关于如何改进的建议。

import React, { useState, useEffect } from "react";

export default function App() {
  const [customSize, setCustomSize] = useState({
    width: "",
    height: "",
    aspectRatio: 1.4
  });
  function setWidth(value) {
    setCustomSize({ ...customSize, width: value });
  }
  function setHeight(value) {
    setCustomSize({ ...customSize, height: value });
  }
  const calculateCustomSize = () => {
    setHeight(() => {
      return () => {
        Math.floor(customSize.width / customSize.aspectRatio);
      };
    });
    setWidth(() => {
      return () => {
        Math.floor(customSize.height / customSize.aspectRatio);
      };
    });
  };

  useEffect(() => {
    return () => {
      calculateCustomSize;
    };
  }, [customSize.width, customSize.height]);

  return (
    <div className="App">
      <input
        placeholder="Width"
        type="number"
        value={customSize.width}
        onChange={(e) => setWidth(e.target.value)}
      ></input>
      <input
        placeholder="Height"
        type="number"
        value={customSize.height}
        onChange={(e) => setHeight(e.target.value)}
      ></input>
    </div>
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

有什么办法吗？

【问题讨论】：

标签： javascript reactjs infinite-loop

【解决方案1】：

您无法根据每次更改重新计算输入值，因为每次重新计算都会触发另一次重新计算。因此无限循环。您需要将您的 customSizes 与输入分开，并单独管理状态。我简化了一些代码，但这基本上是您所需要的。

import React, { useState, useEffect } from "react";

export default function App() {
  //Use for input state
  const [inputSizes, setInputSizes] = useState({
    height: 0,
    width: 0
  });

  //CustomSize state
  const [customSize, setCustomSize] = useState({
    width: "",
    height: "",
    aspectRatio: 1.4
  });

  const calculateCustomSize = () => {
    setCustomSize({
      ...customSize,
      height: Math.floor(inputSizes.width / customSize.aspectRatio),
      width: Math.floor(inputSizes.height / customSize.aspectRatio)
    });
  };

  //Update customSizes when inputSizes are updates
  useEffect(() => calculateCustomSize(), [inputSizes]);

  return (
    <div className="App">
      <input
        placeholder="Width"
        type="number"
        value={inputSizes.width}
        onChange={(e) =>
          //Update the input sizes
          setInputSizes({ ...inputSizes, width: e.target.value })
        }
       ></input>
      <input
        placeholder="Height"
        type="number"
        value={inputSizes.height}
        onChange={(e) =>
          //Update the input sizes
          setInputSizes({ ...inputSizes, height: e.target.value })
        }
       ></input>
      <div>Width: {customSize.width}</div>
      <div>Height: {customSize.height} </div>
    </div>
  );
}

【讨论】：