console.log正在打印数据两次[reactjs]

console.log在打印空数组后打印该值两次，而在打印从ajax调用中获得的值时将打印该值。console.log正在打印数据两次[reactjs]

与它下面印像“[]”和[回答说：“”]

我不知道它是越来越初始化这里我把一个调试器它是在一次仅停止给定的值那里只是用于打印AJAX数据值

{ “状态”：1， “值”：4， “数据”：{ “ANSWER_TEXT”： “回答” } }

class Discuss extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     discussions: [] 
 
    }; 
 
    } 
 
    componentWillMount() { 
 
    this._getData(); 
 
    } 
 
    _getAnswerText() { 
 
    return this.state.discussions.map(discussion => discussion.answer_text); 
 
    }; 
 

 
    render() { 
 
    const comments = this._getComments(); 
 
    return (<div> {comments} <ActionBar answer_text={this._getAnswerText()}/></div >); 
 
    }); 
 
} 
 

 
_getData() { 
 
    $.ajax({ 
 
    method: 'GET', 
 
    url: '/someurl' 
 
    success: (discussions) => { 
 
     var array = []; 
 
     array.push(discussions); 
 
     var dis = [] 
 
     dis.push(array[0].data) 
 
     this.setState({ 
 
     discussions: dis 
 
     }); 
 
    } 
 
    }); 
 
} 
 
} 
 

 
class ActionBar extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
    }; 
 
    render() { 
 
     console.log(this.props.answer_text) 
 
     return (<div> {this.props.answer_text} </div>) 
 
\t }; 
 

 
} 
 

 
ReactDOM.render(<Discuss/>,document.getElementById('content'));

来源

2016-12-02 Gagan

如果我们希望render（）仅在加载数据后才工作，那么'render（）'方法将在'props'和'state'发生变化时调用。 –

如果你真的想从props日志中的数据，请保留log在componentWillReceiveProps()。因为它的发射为每一个新props从父Component

componentWillRecieveProps(nextProps){ 
    console.log(nextProps.answer_text); //you can log data from props here to check 
}

而且你render()方法将被称为每当有props和state变化。即每当您的shouldComponentUpdate()React.Component返回true。

因此很明显，如果数据发生变化，您将看到执行render()方法的次数不止一次(props or state)。

从here了解更多关于React Component及其生命周期。

更新时间：如果你有空闲数据只是返回null在render()

class Discuss extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     discussions: [] 
 
    }; 
 
    } 
 
    componentWillRecieveProps(nextProps){ 
 
    console.log(nextProps.answer_text); //you can log data from props here to check 
 
    } 
 
    componentWillMount() { 
 
    this._getData(); 
 
    } 
 
    _getAnswerText() { 
 
    return this.state.discussions.map(discussion => discussion.answer_text); 
 
    }; 
 

 
    render() { 
 
    const comments = this._getComments(); 
 
    return (<div> {comments} <ActionBar answer_text={this._getAnswerText()}/></div >); 
 
    }); 
 
} 
 

 
_getData() { 
 
    $.ajax({ 
 
    method: 'GET', 
 
    url: '/someurl' 
 
    success: (discussions) => { 
 
     var array = []; 
 
     array.push(discussions); 
 
     var dis = [] 
 
     dis.push(array[0].data) 
 
     this.setState({ 
 
     discussions: dis 
 
     }); 
 
    } 
 
    }); 
 
} 
 
} 
 

 
class ActionBar extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
    }; 
 
    render() { 
 
     const {answer_text} = this.props; 
 
     return ( 
 
      <div> 
 
       { answer_text && answer_text.length > 0 || null} 
 
      </div> 
 
     ) 
 
\t }; 
 

 
} 
 
       
 

 
ReactDOM.render(<Discuss/>,document.getElementById('content'))

来源

2016-12-02 14:31:56

。应该做什么？ – Gagan

这是正常的。 AJAX调用是异步的，所以你的组件继续立即渲染，第一次在它的状态中有空数组，它作为道具传递给ActionBar。当AJAX调用返回时，它会填充数组并更新状态，这会导致再次调用render（），并重新呈现ActionBar以及更新后的prop。

来源

2016-12-02 23:16:06

console.log正在打印数据两次[reactjs]

回答

相关问题