react ，render 问题。无法渲染数据

Question

1. 数据是拿得到的，可以打印renderSelect,但是下面就没法渲染. <p>{selectData}</p>这个都无法渲染？为什么？如何解决

    render(){
        const {dispatch}=this.props;
        const selectData=this.state.selectData
        console.log("renderSelect",selectData)
        const body=(
            <div className="form-group">
                <p>{selectData}</p>
                <label>文件名称</label>
                {/*<input className="form-control" name="newFileName"/>*/}

                <select name="selectFile" id="">
                    <option value="">数据源1</option>
                    <option value="">数据源2</option>
                    {
                        this.state.selectData.map((item,index)=>{
                            return (
                                <option value={item.id} key={index}>{item.datasourceName}</option>
                            )
                        })
                    }
                </select>
            </div>
        );
        const buttons=[
            {
                name:'保存',
                className:'btn btn-success',
                icon:'fa fa-floppy-o',
                click:function () {
                    $(ReactDOM.findDOMNode(this)).data('bootstrapValidator').validate();
                    const isValid=$(ReactDOM.findDOMNode(this)).data('bootstrapValidator').isValid();
                    if(!isValid){
                        return;
                    }
                    componentEvent.eventEmitter.emit(componentEvent.SHOW_LOADING);
                    const newFileName=document.getElementsByName('newFileName')[0].value,{fileType,nodeData}=this.state;
                    setTimeout(function () {
                        dispatch(action.createNewFile(newFileName,fileType,nodeData));
                    },200);

                }.bind(this)
            }
        ];
        return (
            <Dialog title='' body={body} buttons={buttons}/>
        );
    }

---

dialog.jsx 文件

import React,{Component,PropTypes} from 'react';
import * as event from '../../../frame/event.js';
import ReactDOM from 'react-dom';

export default class Dialog extends Component{
    constructor(props){
        super(props);
        this.state={title:this.props.title || '',buttons:this.props.buttons || [],body:this.props.body || []};
    }
    componentDidMount(){
        event.eventEmitter.on(event.OPEN_DIALOG,(data)=>{
            const title=data.title || this.state.title;
            const body=data.body || this.state.body;
            const buttons=data.buttons || this.state.buttons;
            const init=data.init,destroy=data.destroy;
            this.setState({title,body,buttons,init,destroy});
            $(ReactDOM.findDOMNode(this)).modal('show');
        });
        event.eventEmitter.on(event.CLOSE_DIALOG,()=>{
            $(ReactDOM.findDOMNode(this)).modal('hide');
        });
        event.eventEmitter.on(event.DIALOG_CONTNET_CHANGE,(data)=>{
            const title=data.title || this.state.title;
            const body=data.body || this.state.body;
            const buttons=data.buttons || this.state.buttons;
            this.setState({title,body,buttons});
        });
    }
    componentWillUnmount(){
        event.eventEmitter.removeAllListeners(event.OPEN_DIALOG);
        event.eventEmitter.removeAllListeners(event.CLOSE_DIALOG);
    }
    componentDidUpdate(){
        const init=this.state.init;
        if(init){
            init(this.props.dispatch);
        }
    }
    componentWillUpdate(){
        const destroy=this.state.destroy;
        if(destroy){
            destroy();
        }
    }
    render(){
        const buttons=[];
        this.state.buttons.forEach((btn,index)=>{
            buttons.push(<button type="button" key={index} className={btn.className} onClick={(e)=>{
                btn.click(this.props.dispatch);
            }}><i className={btn.icon}></i> {btn.name}</button>)
        });
        return (
            <div className="modal fade" tabIndex="-1" role="dialog" aria-hidden="true">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 className="modal-title" id="myModalLabel">
                                {this.state.title}
                            </h4>
                        </div>
                        <div className="modal-body">

                            {this.state.body}
                        </div>
                        <div className="modal-footer">
                            {buttons}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
};

打印body 是这么个对象？

---

我改了下 body中都支持运算的，但是我传入变量类型是对象的时候就是空？为什么

        const body=(
            <div className="form-group">
                <p>{1+1}</p>
                <p>{selectData}</p>
                <select name="selectFile" id="">
                    <option value="">数据源1</option>
                    <option value="">数据源2</option>
                    {listStr}
                    {selectData.map((l) => (<option key={l.id} value={l.id}>{l.datasourceName}</option>))}
                </select>
            </div>
        );

Answer 1

没发现什么问题。
你在Dailog组件中将body打印出来看看是什么？