react.jsの状態配列で値をプッシュできないのはなぜですか？

Question

アレイに1つの項目を追加して、["50"]をコンソールに記録できます。しかし、私が2番目の値を追加しようとすると、 "currentScores.pushは関数"ではありません。これは間違ったやり方ですか？

class Scores extends Component { 

     constructor() { 
     super(); 
     this.addScore = this.addScore.bind(this); 
     this.handleScoreChange = this.handleScoreChange.bind(this); 
     this.state = { 
      scores: [], 
      scoreInput: '', 
     }; 
     } 

     addScore() { 
     const currentScores = this.state.scores; 
     const newScores = currentScores.push(this.state.scoreInput); 
     this.setState({ scores: newScores }); 
     console.log(this.state.scores); 
     } 

     handleScoreChange(e) { 
     this.setState({ scoreInput: e.target.value }); 
     } 

     render() { 
     const scores = this.state.scores; 
     return (
       <input name="score" type="text" placeholder="Score" onChange={this.handleScoreChange}/> 
       <button onClick={this.addScore(this.state.scoreInput)}>add</button> 
     ); 
     } 
    } 

    export default Scores; 

Answer 1

2つのこと：

あなたはおそらく、あなたが一定の変数を使用して作業している代わりに、以来、新しい配列を作成します。 concatを使用し、値をaddUser関数にバインドします。

また、単一のdiv内のあなたの要素をラップし、それが

class Scores extends React.Component { 
 

 
     constructor() { 
 
     super(); 
 
     this.addScore = this.addScore.bind(this); 
 
     this.handleScoreChange = this.handleScoreChange.bind(this); 
 
     this.state = { 
 
      scores: [], 
 
      scoreInput: '', 
 
     }; 
 
     } 
 

 
     addScore() { 
 
     const currentScores = this.state.scores; 
 
     const newScores = currentScores.concat(this.state.scoreInput); 
 
     this.setState({ scores: newScores }, function(){ 
 
      console.log(this.state.scores); 
 
     }); 
 
     
 
     } 
 

 
     handleScoreChange(e) { 
 
     this.setState({ scoreInput: e.target.value }); 
 
     } 
 

 
     render() { 
 
     const scores = this.state.scores; 
 
     return (
 
       <div> 
 
       <input name="score" type="text" placeholder="Score" onChange={this.handleScoreChange}/> 
 
       <button onClick={this.addScore.bind(this, this.state.scoreInput)}>add</button></div> 
 
     ); 
 
     } 
 
    } 
 

 
    ReactDOM.render(<Scores/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 2

問題がプッシュが改正され、配列の長さビット新しい配列を、返さないということです。実際には、実際にstate.storesを番号に割り当てていますが、もちろんを押してもをサポートしていません。それを変異させます

私はあなたがスコア配列のクローンを作成しようとすることにより、状態を変異避けるためにしようとしている見ることができますが、プッシュは、新しいインスタンスを返しません。次のように何かをする方がよいかもしれません：

const newScores = [...this.state.scores, this.state.scoreInput]; 
this.setState({ scores: newScores }); 

Answer 3

プッシュは、メソッドが呼び出されたときにオブジェクトの新しいlengthプロパティを返します。

毎回、スコアの状態を新しい長さに設定します。

addScore() { 
     console.log(this.state.scores); 
     this.setState(state=> ({ 
      scores: [...state.scores, state.scoreInput] 
      }) 
     ); 
     } 

Answer 4

戻り値currentScores.push()は、配列の新しい要素数です。これをあなたの状態に保存します。つまり、あなたの州のスコアが配列ではなく数字になります。あなたはそれがnew array戻らないpushを利用する際に、

const currentScores = this.state.scores; 
const newScores = currentScores.concat(this.state.scoreInput); 
this.setState({ scores: newScores }); 

Answer 5

問題を変異させるためにいくつかの時間がかかるため、SETSTATEのcallback機能で出力する状態値を、あなたのconsole.log()文を書きますここにいる <button onClick={this.addScore(this.state.scoreInput)}> add</button>);

this.addScore(this.state.scoreInput)をオンにするとクリックすると、javascriptランタイムはaddScore関数を呼び出します。ザッツなぜあなたは50〜ログに記録します

を取得している私は、このような状況では、配列を返すことができますどのように