Rendered more hooks than during the previous render.

[susanforme]

在没有使用react-activation时,并不会有如下错误

{
  "private": true,
  "name": "food-record",
  "scripts": {
    "dev": "umi dev ",
    "build": "umi build",
    "lint": "eslint ./ --ext  .tsx --cache --fix",
    "prettier": "prettier --write .",
    "verify-dist": "tree ./dist && serve ./dist",
    "postinstall": "umi generate tmp"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,less,md,json}": [
      "prettier --write"
    ],
    "*.ts?(x)": [
      "prettier --parser=typescript --write"
    ]
  },
  "dependencies": {
    "@ant-design/icons": "^4.5.0",
    "@ant-design/pro-layout": "^6.5.0",
    "@apollo/client": "^3.3.7",
    "@lifeomic/axios-fetch": "^1.5.1",
    "@umijs/plugin-esbuild": "^1.1.0",
    "@umijs/preset-react": "1.x",
    "antd": "^4.12.3",
    "apollo-upload-client": "^14.1.3",
    "axios": "^0.21.1",
    "crypto-js": "^4.0.0",
    "dayjs": "^1.10.4",
    "graphql": "^15.5.0",
    "moment": "^2.29.1",
    "rc-tween-one": "^2.7.3",
    "react": "^16.14.0",
    "react-activation": "^0.8.0",
    "react-amap": "^1.2.8",
    "react-animated-weather": "^4.0.1",
    "react-dom": "16.14.0",
    "react-jss": "^10.5.1",
    "react-responsive-carousel": "^3.2.12",
    "react-transition-group": "^4.4.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "rmc-feedback": "^2.0.0",
    "socket.io-client": "2.3.0",
    "umi": "^3.3.7",
    "umi-plugin-keep-alive": "^0.0.1-beta.22"
  },
  "devDependencies": {
    "@types/apollo-upload-client": "^14.1.0",
    "@types/crypto-js": "^4.0.1",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-transition-group": "^4.4.1",
    "@types/redux-logger": "^3.0.8",
    "@types/socket.io-client": "^1.4.35",
    "@typescript-eslint/eslint-plugin": "^4.14.0",
    "@typescript-eslint/parser": "^4.14.0",
    "@umijs/test": "^3.3.7",
    "eslint": "^7.18.0",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "lint-staged": "^10.0.7",
    "postcss-pxtorem": "^5.1.1",
    "prettier": "^2.2.0",
    "serve": "^11.3.2",
    "typescript": "^4.1.2",
    "yorkie": "^2.0.0"
  }
}

const Layout: React.FC<LayoutProps> = ({
}) => {
  return (
    <ApolloProvider client={client}>
        <KeepAliveProvider>
          {!isShowBottomNav && !noNav ? <TopNav /> : null}
          {loading ? (
            <Shelf />
          ) : (
            <TransitionGroup
              exit={false}
              appear={true}
              unmountOnExit={true}
              childFactory={(child: ChildComponent) =>
                cloneElement(child, {
                  classNames: animateClass,
                })
              }
            >
              <CSSTransition timeout={400} key={key}>
                <div className="layout" key={key}>
                  {children}
                </div>
              </CSSTransition>
            </TransitionGroup>
          )}

          {isShowBottomNav && !noNav ? <BottomNav /> : null}
        </KeepAliveProvider>
    </ApolloProvider>
  );
};

在这里使用

const Ranging: React.FC = () => {
  return (
    <KeepAlive key="ranging">
      <div className={style.ranging}>
        <CoordInput
          onSuccess={(data) => {
            setPosition(data.tude);
          }}
        />
        <div className={style.map} style={{ width: '100%', height: '21rem' }}>

      </div>
    </KeepAlive>
  );
};

export default Ranging;

[CJY0208]

问题与 #99 相似，后续重构此处逻辑

[CJY0208]

根据 #99 中的方案，在 0.8.1 中做了临时修复，可以尝试新版本看看是否还有此问题