app.tsx render内无法通过条件判断渲染this.props.children

[talentjeff]

相关平台

H5

浏览器版本: Chrome 98.0.4758.102
使用框架: React

复现步骤

修改app.tsx

  constructor(props) {
    super(props);
    this.state = { userInfoSeted: false };
  }

  componentWillMount() {
    setTimeout(() => {
      this.setState({ userInfoSeted: true })
    }, 1000);
  }

  render() {
    return <Provider store={store}>
      {
        this.state.userInfoSeted ? this.props.children : <Text>Loading</Text>
      }
    </Provider>;
  }

期望结果

期望在app渲染前，先加载一些数据

实际结果

页面报错，提示“没有找到页面实例。”

环境信息

👽 Taro v3.3.19

undefined

  Taro CLI 3.3.19 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 14.17.5 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
      npm: 6.14.14 - C:\Program Files\nodejs\npm.CMD

---

补充信息

可以理解成有些数据必须在app执行页面逻辑前获取。发现通过控制app里的render会报错。
请问应该如何解决，谢谢！
Taro版本3.3.19

[github-actions]

等待热心的小伙伴解决问题中..., 有一些相关的 issues 可能帮助到你!

• Taro 3.x Input 组件 在安卓真机中使用手写模式输入内容时，输入第偶数个字时，未触发input事件，无法正常获取输入内容
• 小程序插件页面无法使用Taro专有 Hooks
• 原生项目使用taro，小程序包体积过大无法进行预览上传

Thank you so much!

[ZakaryCode]

不建议这么使用，因为在渲染小程序时，不可以在页面外渲染元素，同时渲染 h5 时也不应对页面作出修改，否则会导致一些额外的问题。尽管如此这个需求依旧有解法来实现，可以通过如下的方法来避开这个错误：

import { Text } from '@tarojs/components'
import { Component } from 'react'

import './app.scss'

class App extends Component {
  state = { userInfoSettled: false }

  componentWillMount() {
    setTimeout(() => {
      this.setState({ userInfoSettled: true })
    }, 1000);
  }

  render() {
    return <>
      <div style={{ display: this.state.userInfoSettled ? 'block' : 'none' }}>{this.props.children}</div>
      {!this.state.userInfoSettled && <Text>Loading</Text>}
    </>
  }
}

export default App

[yoyo837]

Vue3 版本呢? 如何解决这个问题.

[helloint]

@ZakaryCode 那如果我需要异步加载config.json，然后把相关的data倒入redux，该如何处理呢？这就不能简单的display/hide了

import { Suspense, useEffect, useState } from 'react';
import { Provider } from 'react-redux';
import Taro from '@tarojs/taro';
import createStore from './store/store';
import './i18n';
import { Config, CONFIG_URL, httpClient } from './pages/utils';

import './app.scss';

const App = (props) => {
  const [config, setConfig] = useState<Config>();
  useEffect(() => {
    if (process.env.TARO_ENV === 'weapp') {
      Taro.cloud.init();
    }

    httpClient(CONFIG_URL).then((data: Config) => {
      setConfig(data);
    });
  }, []);

  return config ? (
    <Provider store={createStore({ config: { locale: config.locale } })}>
      <Suspense fallback='loading...'>{props.children}</Suspense>
    </Provider>
  ) : (
    ''
  );
};
export default App;

请指点，thanks.