setStateは反応で動的値を受け入れませんでしたか？

Question

私は動的にSETSTATEすることはできませんなぜ私は

this.state = { 
    abc1, 
    abc2, 
    abc3 
} 

のようないくつかの状態を持っていますか？カウントはあなたが動的オブジェクトのプロパティを設定する方法がないことを1/2/3

Answer 1

あるよう

handleDiscount = (count) => { 
     this.setState({ 
      `abc${count}`: `!this.state.abc${count}` 
     }); 
    } 

。それはテンプレートリテラルです。

handleDiscount = (count) => { 
    this.setState({ 
     abc[count]: !this.state.abc[count] 
    }); 
} 

しかし、あなたはとにかく

Answer 2

問題は、あなたがオブジェクトのプロパティの宣言のためのテンプレート文字列を使用していることである配列インデックスでこれを行うことはできません。それは構文エラーです。それでも、あなたはどちらか、変数にテンプレートの文字列を設定し、それを使用することができませんでした：

あなたが何ができるか

let count = 2; 
let bar = `baz${count}`; 
// This will set foo.bar, not foo.baz2 
let foo = { 
    bar: count 
}; 

はES6 computed property namesを使用している：

let count = 2; 
let bar = `baz${count}`; 
// This will set foo[<value of bar>], i.e. foo.baz2 
let foo = { 
    [bar]: count 
}; 

そしてこれは、テンプレートの文字列を使用しています：

let count = 2; 
// This will set foo[<template string evaluated>], i.e. foo.baz2 
let foo = { 
    [`baz${count}`]: count 
}; 

また、値のテンプレート文字列が間違っています。それはthis.stateのプロパティを評価するのではなく、代わりに文字列になります。 "!this.state.abc2"。 !this.stateはコードであり、文字列ではありません。あなたはこれを必要とする：

!this.state[`abc${count}`] 

言われているという以前の状態に基づいて状態を反応させるの設定時はいつでも、あなたはReact docs on setStateから、代わりに機能してSETSTATEを呼び出す必要があります。

[...]場合次の状態が以前の状態に依存して、我々は代わりに、アップデータ機能フォームを使用して をお勧めします。

this.setState((prevState) => { 
    return {counter: prevState.quantity + 1}; 
}); 

ので、SUMMへターゲットオブジェクトのプロパティtarget["string property name"]bracket syntaxを使用してくださいを得るために

handleDiscount = (count) => { 
    this.setState((prevState) => { 
    return { [`abc${count}`]: !prevState[`abc${count}`] } 
    }); 
}; 

Answer 3

：arizeが、これはトリックを行う必要があります。

オブジェクトに動的プロパティを追加する場合は、{ ["string property name"]: value }computed property name syntaxを使用する必要があります。

handleDiscount = (count) => { 
    this.setState({ 
    [`abc${count}`]: !this.state[`abc${count}`] 
    }); 
} 

Please see working example here：

あなたの固定コードは次のようになります。

補足として、実際にはLinus' answer regarding React's setState behaviorにチェックする必要があります。