React組件道具只會在第二次onClick事件後發生變化

Question

我最近收到了反應，並且正在嘗試爲自己創建一個計算器作爲傾斜練習。

目的是當我點擊一個數字按鈕時，那個值就會出現在輸入組件中。到目前爲止，我已經得到了這個工作，但值僅在第二個onClick事件中發生變化。

目前，val1道具在第一次點擊時從輸入中消失，然後在第二次點擊時使用前一個按鈕值重新出現。

關於我的代碼結構的任何提示都非常值得歡迎，我的計算器構建過程中的任何指導也都非常棒。我對此仍然很陌生。

這裏是我下面的代碼：

app.js

import React, {Component} from 'react'; 
import InputField from './Components/InputField'; 
import Numbers from './Components/Numbers'; 
import './App.css'; 

class App extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      number: 0, 
      val1: 0, 
      val2: 0 
     } 
    } 
    numberChange(num1, num2){ 
     this.setState({val1: num1}); 
    } 
    render() { 
     return (
      <div className="App"> 
       <InputField val1={this.state.val1} value={this.state.number || ''} onChange={this.numberChange.bind(this)} /> 
       <Numbers onChange={this.numberChange.bind(this)} /> 
      </div> 
     ); 
    } 
} 

export default App; 

InputField.js

import React, {Component} from 'react'; 

class InputField extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      number: 0 
     } 
    } 
    onChange(e) { 
     console.log('onChange event fired'); 
     this.setState({ 
      number: e.target.value 
     }) 
     this.props.onChange(this.state.number); 
     console.log(this.state.number); 
    } 
    render() { 
     return (
      <div className="inputField"> 
       <input type="number" value={this.props.val1 || ''} onChange={this.onChange.bind(this)}/> 
      </div> 
     ); 
    } 
} 

export default InputField; 

Numbers.js

import React, {Component} from 'react'; 
import {Button} from 'react-bootstrap' 

class Numbers extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      number: props.value 
     } 
    } 
    number(e) { 
     console.log('You\'ve pressed number ' + e.target.value); 
     this.setState({ 
      number: e.target.value 
     }) 
     this.props.onChange(this.state.number); 
    } 
    render() { 
     return (
      <div className="buttons"> 
       <Button bsStyle="primary" value="1" onClick={this.number.bind(this)}>1</Button> 
       <Button bsStyle="primary" value="2" onClick={this.number.bind(this)}>2</Button> 
       <Button bsStyle="primary" value="3" onClick={this.number.bind(this)}>3</Button> 
       <Button bsStyle="primary" value="4" onClick={this.number.bind(this)}>4</Button> 
       <Button bsStyle="primary" value="5" onClick={this.number.bind(this)}>5</Button> 
       <Button bsStyle="primary" value="6" onClick={this.number.bind(this)}>6</Button> 
       <Button bsStyle="primary" value="7" onClick={this.number.bind(this)}>7</Button> 
       <Button bsStyle="primary" value="8" onClick={this.number.bind(this)}>8</Button> 
       <Button bsStyle="primary" value="9" onClick={this.number.bind(this)}>9</Button> 
      </div> 
     ); 
    } 
} 

export default Numbers; 

任何幫助將不勝感激！

Answer 1

setState是一個異步函數，意味着只有在調用onChange回調函數後才更新數據。因此，應用程序組件仍舊獲得舊值this.state.number。

嘗試調用的onChange函數的setState通過完成之後：

number(e) { 
    console.log('You\'ve pressed number ' + e.target.value); 
    this.setState({ 
     number: e.target.value 
    },() => { 
     this.props.onChange(this.state.number); 
    }) 
} 

More info here

Answer 2

this.setState是異步，然後this.props.onChange（this.state.number）;被稱爲狀態真的改變之前，因此state.number具有舊值,,你應該這樣做：this.props.onChange(e.target.value);

number(e) { 
     console.log('You\'ve pressed number ' + e.target.value); 
     this.setState({ 
      number: e.target.value 
     }) 
     this.props.onChange(e.target.value); // check this 
    } 

和方式，您可以添加到這個構造：this.number = this.number.bind(this)，因此你能做到這一點（請注意，我們只是寫道：「this.number」）：

<Button bsStyle="primary" value="1" onClick={this.number}>1</Button> 
    <Button bsStyle="primary" value="2" onClick={this.number}>2</Button> 
    <Button bsStyle="primary" value="3" onClick={this.number}>3</Button> 
    <Button bsStyle="primary" value="4" onClick={this.number}>4</Button> 
    <Button bsStyle="primary" value="5" onClick={this.number}>5</Button> 
    <Button bsStyle="primary" value="6" onClick={this.number}>6</Button> 
    <Button bsStyle="primary" value="7" onClick={this.number}>7</Button> 
    <Button bsStyle="primary" value="8" onClick={this.number}>8</Button> 
    <Button bsStyle="primary" value="9" onClick={this.number}>9</Button> 

甚至更​​好，你可以做到這一點，而不是重複你的自我9次：

render() { 
     let buttons = [] 
     for(var i =1; i <10; i++) 
      buttons.push(<Button bsStyle="primary" value={i} onClick={this.number}>{i}</Button>) 
     return (
      <div className="buttons"> 
       {buttons} 
      </div> 
     ); 
    }