react-native:`this.state`在`render`中未定义

Question

我有以下代码,结果this.state是undefined:

articles.js

const React = require('react-native')
const _ = require('lodash')

const styles = require('../styles/articles')
const api = require('../data/api')

const {
  ListView,
  View,
  Text,
  Image
} = React

const Articles = React.createClass({

  getInitialState: () => {
    return { articles: [] }
  },

  componentDidMount: () => {
    const self = this
    const body = [{ screen_name: 'wired' }]
    api.get('timelines', body)
      .then(data => {
        self.setState({ articles : data })
      })
  },

  renderArticle: article => {
    const { container, thumbnail, rightContainer, title, year } = styles;

    return (
      <View key={article.id} style={container}>
        <Text style={title}>{article.title}</Text>
      </View>
    )
  },

  render: () => {
    console.log('render', this.state)
    const articles = _.map(this.state.articles, article => renderArticle(article), this)
    return <View style={styles.listView}>{articles}</View>
  }
})

module.exports = Articles

index.ios.js

const React = require('react-native')

const Articles = require('./src/components/articles')

React.AppRegistry.registerComponent('movies', () => Articles)

console.log在render方法中说this.state是未定义的.我究竟做错了什么？

Answer 1

你正在使用React.createClass箭头函数,这会破坏绑定this.

所以不要这样做

render () => {}

做

render: function () {}

或切换到ES6类,这将使您当前的类看起来像这样

class Articles extends React.Component {
    renderArticles = () => {}
    render() {} // render and other lifecycle methods are always left without an arrow function
}

在ES6中,React不再支持.createClass为您提供的自动绑定功能,这就是您要使用和箭头功能或.bind在编写ES6 React组件时使用的原因.

另请注意,当使用Babel,ES6和React时,某些功能可能会隐藏在舞台标志后面,您必须随时调查这些功能!