时间戳

首页 > 解决方案 > 从辅助源更新反应组件的正确方法

reactjs - 从辅助源更新反应组件的正确方法

问题描述

我是 React Hooks 的新手，在制作组件时遇到了问题。我的应用程序有一个简单的表单，其中包含几个字段和一个“计算”按钮，该按钮从 API 获取信息并将结果显示在表格上。该应用程序使用两种货币，它们可以通过一对按钮进行切换。我想要的是在更改货币时更新表格（重新获取数据），但只有在更改货币之前已经通过主“计算”按钮计算了一些东西。我的组件类似于：

const ProductionCosts = () => {
  const [data, setData] = useState({}); 
  const [useXCurrency, setUseXCurrency] = useState(true);


  const calcCosts = useCallback(async () => {

    fetchCalcData(args);
  }, [args]);

  useEffect(() => {
    if (Object.keys(data).length > 0) //check data isn't empty, hence it was already calculated
      fetchCalcData();
  }, [useXCurrency]);



  return (
   ......

  );
};

执行与上述类似的操作，但 linter 会说数据需要位于 useEffect 的依赖项列表中，但鉴于 fetchCalcData 修改数据并触发效果，添加它会导致循环，我知道 linter建议不是绝对的，但同时我知道必须有更好的方法。所以除了添加布尔标志或类似的东西之外，这种情况还有更好的方法吗？

标签： reactjsreact-hooks

解决方案

通常，您希望使用具有初始值的引用并在成功时对其进行更新，接下来useEffect的条件将是虚假的：

const ProductionCosts = () => {
  const [data, setData] = useState({});

  const dataRef = useRef(data);

  useEffect(() => {
    if (Object.keys(dataRef.current).length > 0) {
      const data = // fetch your data
      dataRef.current = data;
    }
  }, [useXCurrency]);

  return <></>;
};

推荐阅读