[16:36:03] Using gulpfile ~/../hox/gulpfile.js
[16:36:03] Starting 'build'...
[16:36:03] Starting 'clean-lib'...
[16:36:03] Finished 'clean-lib' after 2.4 ms
[16:36:03] Starting 'copy-files'...
[16:36:03] Finished 'copy-files' after 78 ms
[16:36:03] Starting 'ts'...
/.../node_modules/@types/testing-library__react/index.d.ts(13,49): error TS7016: Could not find a declaration file for module '@testing-library/dom'. '/.../node_modules/@testing-library/dom/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/testing-library__dom` if it exists or add a new declaration (.d.ts) file containing `declare module '@testing-library/dom';`
/.../node_modules/@types/testing-library__react/index.d.ts(16,15): error TS7016: Could not find a declaration file for module '@testing-library/dom'. '/.../node_modules/@testing-library/dom/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/testing-library__dom` if it exists or add a new declaration (.d.ts) file containing `declare module '@testing-library/dom';`
TypeScript: 2 semantic errors
TypeScript: emit succeeded (with errors)
[16:36:10] 'ts' errored after 6.67 s
[16:36:10] Error: TypeScript: Compilation failed
    at Output.mightFinish (/.../node_modules/gulp-typescript/release/output.js:130:43)
    at applySourceMap.then.appliedSourceMap (/.../node_modules/gulp-typescript/release/output.js:65:22)
[16:36:10] 'build' errored after 6.75 s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

import React, { useEffect } from 'react';
import useLocalesModel from '@/models/useLocales';
import { useSize } from '@umijs/hooks';
import { Spin } from 'antd';

function Locale({ children }) {
  const [body] = useSize(document.querySelector('body'));
  const { localeLoaded } = useLocalesModel();

  return (
    localeLoaded ? { children }
      : (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            alignContent: 'center',
            width: body.width,
            height: body.height,
            margin: 'auto',
            textAlign: 'center'
          }}
        >
          <Spin tip="语言加载中..." size="large" />
        </div>
      )
  )
}
export default Locale;

import { useState, useRef, useEffect } from 'react';
import intl from 'react-intl-universal';
import request from 'umi-request';
import { usePersistFn } from '@umijs/hooks';
import _ from 'lodash';

// import scope from 'babel-plugin-console/scope.macro';
// import { useRequest } from '@umijs/hooks;'

import { createModel } from 'hox';

const Locales = [
  {
    name: '简体中文',
    value: 'zh-CN',
    icons: '🇨🇳'
  },
  {
    name: 'English',
    value: 'en-US',
    icons: '🇺🇸'
  }
];

function useLocales() {
  // 缓存json 防止重复请求
  console.log('useLocales running');
  const localeList = useRef(new Map());
  // 用ref 主要为了避免不必要的刷新。
  const curLang = useRef({ lang: null });

  const [localeLoaded, setLocaleLoaded] = useState(false);
  const [curLocale, setCurLocale] = useState(() => {
    const currentLocale = intl.determineLocale({
      urlLocaleKey: 'lang',
      cookieLocaleKey: 'lang',
      localStorageLocaleKey: 'lang'
    });
    const returnLocale = _.find(Locales, { value: currentLocale }) || Locales[0];
    return returnLocale;
  });


  const loadLocale = (locale) => {
    const currentLocale = locale.value;
    if (localeList.current.has(currentLocale)) {
      intl.init({
        currentLocale,
        locales: {
          [currentLocale]: localeList.current.get(currentLocale)
        }
      });
      curLang.current.lang = currentLocale
    } else {
      request.get(`public/locales/${currentLocale}.json`, {
        responseType: 'json'
      })
        .then(res => {
          intl.init({
            currentLocale,
            locales: {
              [currentLocale]: res
            }
          });
          localeList.current.set(currentLocale, res);
          curLang.current.lang = currentLocale;
        })
        .then(() => {
          setCurLocale(locale);
          setLocaleLoaded(true);
        })
    }
  };

  useEffect(() => {
    console.log('effect:', curLocale);
    loadLocale(curLocale);
  })

  const changeCurLocale = usePersistFn((key) => {
    if (curLang.current.lang === key) return;
    const returnLocale = _.find(Locales, { value: key }) || Locales[0];
    loadLocale(returnLocale);
  });

  return { Locales, curLocale, localeLoaded, changeCurLocale, intl }
}

export default createModel(useLocales);

const useAModel = usecreateModel(() => {
    const [aList] = useState([]）
    return {
        aList
    }
})

const useBModel = usecreateModel(() => {
    const { aList } = useAModel()
    const [bList] = useState([]）

    React.useEffect(() => {
        // 在这里想参考aList数据，生成一个bList
     }, []);

    React.useEffect(() => {
        // 在这里想订阅aList的更新，对bList进行更新
    }, [aList]);

    return {
        bList
    }
})

The above error occurred in the <Executor> component:
    in Executor

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

const useUser = () => {
    const [id, setId] = useState('');
    const [token, setToken] = useState('');
    const [username, setUsername] = useState('');
    const [email, setEmail] = useState('');
    const [points, setPoints] = useState('');
    const [avatar, setAvatar] = useState('');

..省略号...

const useUser = () => {
    const [user, setuser] = useState(
        {
          id:'',
          token:'',
          username:'',
          email:'',
          points:'',
          avatar:'',
        }
    );
 

..省略号...

import { createModel } from 'hox';
import { useBoolean } from '@umijs/hooks';


function useToggle(defValue) {
  const { state, toggle, setTrue, setFalse } = useBoolean(defValue ?? true);
  const set = (bool) => (bool ? setTrue : setFalse)
  return { state, toggle, set }
}


export const useSiderMenuToggleModel = createModel(useToggle);
export const useTabsToggleModel = createModel(useToggle);

export const useSiderMenuToggleModel = createModel(useToggle,false);
export const useTabsToggleModel = createModel(useToggle,true);

import { createModel } from 'hox';
import { useEffect, useState } from 'react';

function useModel() {
    const [model, setModel] = useState(null)
    
    useEffect(() => {
        // 这个外部拿不到model更新
        setModel({ a: 1 });
        // 这个外部可以拿到更新
        setTimeout(()=>{
            setModel({ a: 1 });
        }, 0);
    }, []);

    return [model, setModel]
}

export default createModel(useModel);