最新消息:20181230 VPS服务器已从Linode换到腾讯云香港,主题仍用朋友推荐的大前端D8

【已解决】ReactJS中首页要点击3次才能加载内容

ReactJS crifan 790浏览 0评论

之前已经写好了基于Preact的ReactJS的:

入口的app.js

export default class App extends Component {
  render() {
    const prop = this.props;
    //TODO: fix first load not load main page content
    return (
      <div id="app">
        <Loading show={prop.globalLoadingShown}/>
        <Header curUrl={this.state.curUrl} goBackFunc={this.goBackFunc} fetchFunc={this.props.fetch}/>
        <div class="container">
          <Router onChange={this.handleRoute} history={browserHistory}>
            <Main path="/" />
            <Profile path="/profile" />
            …
          </Router>
        </div>
        {
          // TODO
          // 刷新时匹配路由高亮
        }
        <Tabbar data={prop.globalTabbar} onChange={this.onTabChange}/>
      </div>
    );
  }
}

和首页main.js的代码:

export default class Main extends Component {
  render() {
    …
    return (
      <div class={style.container}>
        …

但是,首次进入页面后,除了tab已经加载了之外,主页内容区域是白屏:

要点击tab首页2次,数据才能加载:

reactjs  main page need click tab load

react js main page not load until click tab

之前看到过IndexRoute,不知道是不是用于首次自动加载的?

javascript – Dynamically loading react pages – Stack Overflow

route only loads page on refresh · Issue #13 · router5/react-router5

react js router first page not load

javascript – React-router urls don’t work when refreshing or writting manually – Stack Overflow

reactjs – Setting initial route with react-router – Stack Overflow

IndexRoute

preact router IndexRoute

javascript – How to use React Router with Preact – Stack Overflow

React router compat · Issue #47 · developit/preact-compat

把:

    //<Main path="/" />

换成:

import { IndexRoute } from ‘preact-router’;
          <Router onChange={this.handleRoute} history={browserHistory}>
            <IndexRoute path="/" component={Main} />
            <Profile path="/profile" />

试试

结果点击多次后,Main页面也加载不出来了。。 显示白屏。

preact router index page

所以,对于Preact来说:

不需要IndexRoute

因为:

对于首页index的route来说,根据你自己定义的路由地址匹配到首页,就是IndexRoute了。

比如:

此处的:

<Main path="/" />

path是/,匹配了首页地址,所以Main就是IndexRoute了。

再去改为:

        <Header curUrl={this.state.curUrl} goBackFunc={this.goBackFunc} fetchFunc={this.props.fetch}/>
        <Main path="/" />
        <div class="container">
          <Router onChange={this.handleRoute} history={browserHistory}>
            <Profile path="/profile" />

也不行。

后来有点感觉了:

(1)第一次是打开首页是

/uapp/ 不是/ 所以没加载出来Main页面

(2)点击了Tab上的 首页

匹配了路由 / 所以加载了主页内容

(3)再次点击首页

调用Main的render 刷新数据了。

抽空去解决此问题就好:

把路由统一都换成 /uapp/

且确保主页中render中的值是this.state.xxx 这样就可以及时更新数据了。

然后现在需要:

【已解决】ReactJS的Preact中如何用配置文件中参数或者全局定义的常量用于其他地方

记录于此:

此处,把路由的路径从

/

改为:

/uapp/

不知道会不会影响其他的,比如:

OfflinePlugin

有机会再去深究。

然后就接着把所有的route中的路由的path,都统一起来,结果调试期间出错:

【已解决】Preact程序调试运行出错:Uncaught TypeError: Cannot read property ‘replace’ of undefined

然后继续去统一路由的path

最后结果是:

localhost中用Chrome浏览器去测试:

可以一次性加载Main首页,且显示数据了

但是放到原生app的移动端Android中,结果虽然加载了Main首页,但是数据没有显示出来:

切换到别的页面后再回首页,数据才显示:

所以还是没有彻底解决。

貌似是首页的数据的render的刷新问题?

【总结】

经过调试发现原因(貌似)是:

对于Main中的render,显示数据所用到的三个列表所对应的三个函数,的确是调用了,但是只是第一次去调用的,此时,login登录还没有完成呢,所以返回的数据都是0,所以虽然获得数据了,但是都是0。

然后此处的规避的办法是:

当login后,callback中,加上刷新的显示的代码:

  loginCallback(userInfoJsonStr){
    alert(`after login callback: window.updateMainPage=${window.updateMainPage}`);
    if (window.updateMainPage) {
      console.info("after login callback, now refresh main page");
      window.updateMainPage();
    }

其中window.updateMainPage是在Main函数中提供的:

export default class Main extends Component {
  constructor(props) {
    console.log(‘Main constructor’);
    super(props);
    autoBind(this);
    this.updateMainPage = this.updateMainPage.bind(this);
  }
  componentWillMount() {
    console.log(‘Main componentWillMount’);
    this.updateMainPage();
    window.updateMainPage = this.updateMainPage;
  }
  updateMainPage(){
    console.log(`Main updateMainPage`);
    this.fetchTodoNum();
    this.fetchCurMonthTodoNum();
    this.fetchNiuqunStatus();
  }

如此,就可以正常在登录后,再去调用updateMainPage而获得和显示数据了。

效果是:

转载请注明:在路上 » 【已解决】ReactJS中首页要点击3次才能加载内容

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
61 queries in 0.168 seconds, using 10.00MB memory