从辅助源更新反应组件的正确方法答案

【问题标题】：Correct way to update react component from secondary source从辅助源更新反应组件的正确方法
【发布时间】：2020-07-10 01:49:29
【问题描述】：

我是 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 修改数据并触发效果，我知道短绒建议不是绝对的，但同时我知道必须有更好的方法。那么除了添加布尔标志或类似的东西之外，对于这种情况还有更好的方法吗？

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

通常您希望使用具有初始值的引用并在成功时更新它，在下一个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 <></>;
};

【讨论】：