Question

我对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修改了数据并触发了效果，添加它会导致循环，我知道关于皮棉绒的建议不是绝对的，但与此同时，我知道必须有更好的方法。因此，除了添加布尔标志或类似的东西之外，还有一种更好的方法来解决这种情况吗？

Answer 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 <></>;
};

从次要来源更新反应组件的正确方法

1 个答案: