配列のn番目のアイテムを親の状態でReactの子から更新しますか？

Question

私の最上位コンポーネントには、状態を更新する機能があります。これを私の主な状態を更新できるように、別の子要素に渡します。私のトップレベルのコンポーネントで

：これは働いている

updateValue(item, value) { 
    this.setState({[item]: parseInt(value)}); 
    } 

は、これまでしかし、今私は、配列のn番目の項目を更新する必要があります。

私のトップレベルの状態は、このようなものです：

this.state = { 
    chosenExercises: [ 
    'Bench press', 
    'Squat', 
    'Pull up' 
    ] 
}; 

など何かをしようとしている私の子コンポーネントイム中：私の状態はその後になるよう

this.props.updateValue('chosenExercises'[1], 'New exercise'); 

を：

this.state = { 
    chosenExercises: [ 
    'Bench press', 
    'New exercise', 
    'Pull up' 
    ] 
}; 

これは正しい方法ですか？または、私の状態はキーバリューペアでなければなりませんか？

this.state = { 
    chosenExercises: { 
    0: 'Bench press', 
    1: 'New exercise', 
    2: 'Pull up' 
    } 
}; 

これは潜在的にベストプラクティスであるターゲットしやすいが、イムわからない演習を行うの私の問題の一部を解決するだろう。

Answer 1

selectedExercisesは複数の値をとることができるので、配列として扱うのは理にかなっていますが、状態を別の方法で更新する必要があります。更新する配列要素のインデックスを渡す代わりに、実際に配列のコピーを作成し、それを子要素で更新し、更新された配列を親に送信する必要があります。子供で

：

updateValue = (item, index, value) => { 
    let newValue = [...this.props[item].slice(0, index), value, ...this.props[item].slice(index + 1)]; 
    this.props.updateValue(item, newValue); 
} 

Answer 2

これとの事はあなたの状態はあなたの状態に更新するために、新しい配列を提供しなければならないので、不変のままにならないことである

あなたのような何かを行うことができます。 array.slice()機能を使用すると、そのインデックスで値を更新した新しい配列を作成し

this.updateValue('chosenExercises', 1, 'New exercise'); 


updateValue(item, index, value) { 
    const newArray = this.state[item].slice(); 
    newArray[index] = value; 
    this.setState({ [item]: newArray }); 
} 

：だからあなたのようなものになってしまいます。その後、新しい配列でコンポーネントの状態を更新します。

---

これを頻繁に行うようになった場合、Reactはこれらのものに対して不変性ヘルパーを作成しました。あなたはそれについての詳細を読むことができますhere。これはあなたのような何かを聞かせ：

import update from 'react-addons-update'; 

this.setState({ 
    [item]: update(this.state[item], {[index]: {$set: value } }) 
}); 

Answer 3

それはトップレベルのコンポーネントでこれを行うことができます。

this.props.updateValue('setLength', e.target.value, {})} 

：通常の使用では

updateValue(item, value, options) { 
    if (options.isChosenExercises === true) { 
     this.setState((prevState) => { 
     let newchosenExercises = prevState.chosenExercises.slice(); 
     newchosenExercises[item] = value; 
     return {chosenExercises: newchosenExercises}; 
     }); 
    } else { 
     this.setState({[item]: parseInt(value)}); 
    } 
    } 

が最後のパラメータとして空のオブジェクトを渡します

しかし、エクササイズ配列を更新するには、isExercisesをtrueに設定してオブジェクトを渡します。

chooseThisExercise() { 
    this.props.updateValue(numberInTheArrayToChange, newExercise, {isChosenExercises: true}); 
    }