刷新后应用程序崩溃

Question

我的应用程序有问题。一切都很好，直到我按下刷新按钮。我假设它正在发生，因为有些东西还没有准备好渲染。

import React from 'react'
import { Meteor } from 'meteor/meteor'
import { createContainer } from 'meteor/react-meteor-data'
import { withRouter } from 'react-router'

import LeftNavbar from '../dashboard/LeftNavbar'
import UpperBar from '../dashboard/UpperBar'
import NewGreetingsForm from './NewGreetingsForm'
import ConfigureButtons from './ConfigureButtons'

import Fanpages from '../../../api/Fanpages.js'

import './Greetings.scss'

export class Greetings extends React.Component {
  constructor (props) {
    super(props)
    this.fanpage = this.props.user.profile.fanpages

    this.state = {
      newGreetingsText: '',
      newGreetingsCharCount: 0
    }
  }

  componentDidMount () {
  }

  render () {
    const currentFanpage = Fanpages.findOne({fanpageName: this.fanpage})
    const currentGreeting = currentFanpage.fanpageInfo.fanpageInfo.config.greeting[0].text
    return (
      <div className='container page'>
        <UpperBar title={'Konfiguracja fanpage / Zdefiniuj greetings'} />
        <LeftNavbar />
        <div className='main-content'>
          <h4 id='main-title'>{this.fanpage}</h4>
          <div className='container'>
            <div className='row'>
              <ConfigureButtons />
              <div>
                <h5 id='configure-content-right'>Zmień obecną informację</h5>
                <NewGreetingsForm fanpageName={this.fanpage} placeholder={currentGreeting} />
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default withRouter(createContainer(() => ({
  user: Meteor.user()
}), Greetings))

知道我应该将这些变量从 render 方法移到哪里吗？所以它在页面刷新后可以正常工作吗？非常感谢您的参与。

Answer 1

假设在该组件之上进行订阅管理，您可以防止数据未准备好：

render () {
  const currentFanpage = Fanpages.findOne({fanpageName: this.fanpage});
  if (!currentFanpage) {
    return (
      <div />
    );
  } else {
    const currentGreeting = currentFanpage.fanpageInfo.config.greeting[0].text
    return (
      // your html
    )
  }
}

更好的是，让父组件呈现微调器，直到订阅 .ready()

更新您询问了将 createContainer 与 withRouter 一起使用的问题。我通常不使用 withRouter，我也没有测试过这个，但它应该是这样的：

const container = () => {
  const sub = Meteor.subscribe('mysub');
  const loading = sub.ready();
  const user = Meteor.user();
  return { loading, user };
}

export default withRouter(container, Greetings))

重要的是容器有一个与订阅状态相关联的 loading 密钥。

Container tutorial

刷新后应用程序崩溃

App crashes after refresh

render

meteor

reactjs