react state

Question

想要在render中使用this.state.data 一直报错

import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
import { getListData } from '../../../fetch/home/home'

import ListCompoent from '../../../components/List'
import LoadMore from '../../../components/LoadMore'

import './style.less'

class List extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state = {
            data: [],
            hasMore: false,
            isLoadingMore: false,
            page: 0
        }
    }
    render() {
        console.log(this.state)
        return (
            <div>
                <h2 className="home-list-title">猜你喜欢</h2>
               {this.state.data}  
               {/*  只要添加上面的语句就会报错 */}
            </div>
        )
    }
    componentDidMount() {
        // 获取首页数据
        this.loadFirstPageData()
    }
    // 获取首页数据
    loadFirstPageData() {
        const cityName = this.props.cityName
        const result = getListData(cityName, 0)
           // 处理数据
        result.then(res => {
            return res.json()
        }).then(json => {
            const hasMore = json.hasMore
            const data = json.data

            this.setState({
                hasMore: hasMore,
                // 注意，这里讲最新获取的数据，拼接到原数据之后，使用 concat 函数
                data: this.state.data.concat(data)
            })
        }).catch(ex => {
            if (__DEV__) {
                console.error('首页”猜你喜欢“获取数据报错, ', ex.message)
            }
        })
    }
  
 
 
}

export default List

debug 看到state中是包含這個屬性的，但是爲什麼不能使用呢？還請指教下。

Answer 1

把变量用组件包裹一下，比如：

render()　{
    return() {
         <div>
             <h2 className="home-list-title">猜你喜欢</h2>
             <div>{this.state.data}</div>
             <div>{this.state.page}</div>
         </div>
    }
}

Answer 2

this.state.data得是一个元素吧？