オブジェクトの中に入れ子になった配列の状態を更新する（ReactJS）

Question

私は、複数のキーを持つ状態（ "car"）のオブジェクトを持っています。その1つは配列です（ "features"）。私がそれをやろうとしていることがいくつかあります。

1. 「機能の追加」ボタンをクリックするたびに、別の文字列（別の機能）を「機能」配列にプッシュしたいとします。
2. それぞれの入力を入力するときに、 "features"配列内の各文字列/機能の状態を更新したいと考えています。

私はこれをかなりオンラインで調査しましたが、何も見つかりませんでした（おそらくこれは不可能なためです）。いずれにしても、ここに私のコードはです：ちょうど車にコピーし、プッシュを作成

class Car extends React.Component { 

    state = { 
    car: {make: 'Toyota', model: 'Camry', features: []}, 
    } 


    handleChange = (e, index) => { 
    const value = e.target.value 
    let features = this.state.car.features.slice() // create mutable copy of array 
    features = features[index].concat(value) 
    this.setState({...this.state.car, features: features}) 
    } 

    handleAddFeature =() => { 
    let features = this.state.car.features.slice() 
    features.push('') 
    this.setState({...this.state.car, features: features}) 
    } 

    render() { 
    return (
     { 
     this.state.car.features.map((f, index) => { return <input key={index} onChange={e => this.handleChange(e, index)}>{feature}</input> 
     } 
     <button onClick={this.handleAddFeature}>Add Feature</button> 
    ) 
    } 
} 

Answer 1

これは、@ Snkendallの答えと非常によく似た方法で動作します。私handleChange機能は以下の通りである：

handleChange = (e, index,) => { 
    let array = this.state.car.features.slice() // create mutable copy of the array 
    array[index] = e.target.value // set the value of the feature at the index in question to e.target.value 
    const newObj = { ...this.state.car, features: array } // create a new object by spreading in the this.state.car and overriding features with our new array 
    this.setState({ car: newObj }) // set this.state.car to our new object 
} 

この溶液との間及びSnkendallの@の違いはnewObj変数の定義です。これは、状態オブジェクト内にネストされた個々のキーを更新する唯一の方法であることがわかります。

Answer 2

Ad.1

handleAddFeature =() => { 
    const car = this.state.car 
    car.features.push('Your feature') 
    this.setState({ car }) 
    } 

は、新たな価値を提供しています。

広告。 2 例：特徴。彼は文字列を変更する独自の状態を持ち、小道具を使ってあなたの "車"にデータを抽出することができます。

Answer 3

コンポーネントに状態がある場合は、コンストラクタを使用し、内部にthis参照をバインドして 'this'がグローバルを参照しないようにすることができます。あなたはこのようなあなたの状態をラップ：

class Car extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     car: {make: 'Toyota', model: 'Camry', features: []}, 
    } 
    this.handleChange = this.handleChange.bind(this) 
    this.handleAddFeature = this.handleAddFeature.bind(this) 
    } 

これは「この」について考えるための本当に素晴らしい記事です：あなたはconcattingしているので、あなたの問題を引き起こす可能性がありますhttp://2ality.com/2017/12/alternate-this.html

別の領域は、... features = features[index].concat(value)ですすべての変更（キーストローク）に何度も何度も何度も何度も繰り返して、現在の文字列に入力タグの値を重ねます。あなたは、このような配列でそのインデックスにある要素の値をリセットすることができます。

handleChange = (e, index) => { 
    const value = e.target.value 
    let features = this.state.car.features.slice() 
    features[index] = value 
    this.setState({...this.state.car, features}) 
} 

とその方法は、各キーストロークは、ちょうど入力で作成された変更を反映した状態での値をリセットします。状態はすでにhandleChangeで更新されているので、実際にはhandleAddFeatureを使用する必要はありません。

私はに変更しています。なぜなら、キーとその値が同じであれば、それを一度だけ参照すればよいということです。コードをよりDRY的に保つだけのクールな方法です。