代码之家 › 专栏 › 技术社区 › Rachomir

刷新后应用程序崩溃

render meteor reactjs

Rachomir · 技术社区 · 8 年前

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))

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

1 回复 | 直到 8 年前

Michel Floyd 8 年前

假设此组件上正在进行订阅管理,您可以针对未准备好的数据进行防御:

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 . 我通常不使用 带路由器 我还没有测试过,但应该是这样的:

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