Response-native: `this.state` undefined в` render`

У меня есть следующий код, который приводит к 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 - undefined. Что я делаю неправильно?

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 некоторые функции могут быть скрыты за флагами этапа, вам придется исследовать их по мере продвижения!

licensed under cc by-sa 3.0 with attribution.