web-dev-qa-db-ja.com

不変性ヘルパーを使用したReact状態の配列オブジェクトの更新

React immutability helper を使用して状態内の配列内のオブジェクトを更新しています。

変更したいオブジェクトはネストされています：

this.state = {
  a: {
    b: [{ c: '', d: ''}, ...]
  }
}

不変性ヘルパーを使用して、bのn番目の要素内のprop cを更新します。

不変性ヘルパーを使用しない同等のコードは次のとおりです。

const newState = Object.assign({}, this.state);
newState.a = Object.assign({}, newState.a);
newState.a.b = newState.a.b.slice();
newState.a.b[n] = Object.assign({}, newState.a.b[n]);
newState.a.b[n].c = 'new value';
this.setState({ newState });

上記のコードは少しugいことを知っています。不変性ヘルパーを使用するコードが私の問題を解決すると仮定しています。ありがとう

javascriptreactjsimmutability
21
vijayst

それを行う1つの方法は、$set

let index = 0;
let newState = update(this.state, {
   a: {
     b: {
      [index]: {
               c: { $set: "new value"}
       }
    }
  }
});
this.setState(newState);

jsfiddle

29
QoP

Im不変性ヘルパーからupdateをインポートしています:)

this.state = {
  a: {
    b: [{ c: '', d: ''}, ...]
  }
} 


this.setState((prevState, props) => update(prevState, {
    a: {
        b: {
            $apply: b => b.map((item, ii) => {
                if(ii !== n) return item;
                return {
                    ...item,
                    c: 'new value'
                }
            })
        }
    }
}))
3
FlatLander