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]

回答

相關問題