Question

正在运行的演示：https://codesandbox.io/s/charming-babbage-wo26i

interface AppContextInterface {
  val: number;
  isLoading: boolean;
}

const ctx = React.createContext<AppContextInterface>({
  val: NaN,
  isLoading: false
});

const AppContextProvider: React.FC = ({ children }) => {
  const [state, setState] = React.useState({ val: NaN, isLoading: false });
  React.useEffect(() => {
    if (state.isLoading) return;
    setState({ ...state, isLoading: true });
    setTimeout(() => {
      setState({ isLoading: false, val: 555 });
    }, 500);
  }, [state]);
  return <ctx.Provider value={state}>{children}</ctx.Provider>;
};

const App: React.FC = () => {
  return (
    <AppContextProvider>
      <ctx.Consumer>
        {state => <h1>{state.isLoading ? "loading..." : state.val}</h1>}
      </ctx.Consumer>
    </AppContextProvider>
  );
};

因此，基本上，我试图在呈现AppContextProvider时获取数据。加载数据可能要花费一些时间，因此isLoading标志指示该数据正在进行中，可以防止重复加载，并且还允许使用者显示“ Loading ...”消息。问题是设置isLoading标志会导致AppContextProvider在加载完成后再次重新渲染，并且会导致无限渲染循环。显而易见的解决方案是从useEffect依赖项中忽略“状态”，但会触发“穷举”的皮棉规则

问题：如何正确处理这种情况，并防止“详尽的后遗症”规则引起抱怨？

如何使用useEffect正确处理加载状态？

0 个答案: