在AJAX调用后ReactJS重新渲染

Question

学习反应,虽然我理解组件的生命周期,但我不明白,虽然我的JSON调用成功但它不会呈现我最初提取的项目列表.当我向列表添加新项目时,它会进行渲染,但这需要我单击编辑按钮并添加新元素.

var InterBox = React.createClass({
    getInitialState: function(){
        return {
            "content" : [],
            "editing" : false,
            "pulled" : false
        }
    },
    componentDidMount: function(){
        var url = "http://jsonplaceholder.typicode.com/posts";
        var tempdata = this.state.content;
        $.getJSON(url, function(data){
            for (var i = 0; i < data.length; i++) {
                var element = data[i];
                tempdata.push(element.body);
                console.log(tempdata);
            }
        });
        this.setState({"content":tempdata});
        this.forceUpdate();
    },
    addContent: function(e){
        var currentContent = this.state.content;
        currentContent.push(this.refs.content.value);
        this.refs.content.value = "";
        this.setState({"content" : currentContent, "editing" : false});
        this.render();
    },
    changeMode: function(e){
        this.setState({"editing": true});
        this.render();
    },
    render: function(){
        if (this.state.editing)
            return(
                <div>
                    <h1>{this.props.title}</h1>
                    <input type="text" ref="content"/>
                    <button onClick={this.addContent}>Add</button>
                </div>
            );
        else{
            var items = [];
            for (var i = 0; i < this.state.content.length; i++) {
                var element = this.state.content[i];
                items.push(<li>{element}</li>);
            }
            return(
                <div>
                    <h1>{this.props.title}</h1>
                    <button onClick={this.changeMode}>Edit</button>
                    <ul>
                        {items}
                    </ul>
                </div>
            );
        }
    }
});
ReactDOM.render(
    <InterBox title="Hello"></InterBox>,
    document.getElementById('main')
);

这是初始输出

这应该是什么样子

Answer 1

1.)因为$ .getJSON func是异步的,所以你应该等待响应,然后在回调中调用setState.

  let {content} = this.state;
  $.getJSON(url,data=>{
         let result = data.map(e=>e.body);
         this.setState({content:[...content, ...result]}); 
   });

2.) 您不需要 forceUpdate()和render(),因为setState会为您调用渲染组件.

3.) 你不应该通过push()改变你的状态.它会导致问题和错误.相反,您可以使用spread operator或concat等

//concat returns new array
let {content} = this.state;
this.setState({content:content.concat(result)}); 

//spread operator
let {content} = this.state;
this.setState({content:[...content, ...result]}); 

4.) 如果你不想在回调中使用arrow func,你应该使用bind(this),否则你将在回调中使用setState的undefined

 let {content} = this.state;
 $.getJSON(url,function(data){
              let result = data.map(e=>e.body);
              this.setState({content:content.concat(result)}); 
         }.bind(this));