この質問は、「ベストプラクティス」の質問の側面に少し当てはまるかもしれませんが、ご容赦ください。
ここに私の状態の一部があります:
_this.state = {
typeElements: {
headers: [
{
name: "h1",
size: 70,
lineHeight: 1.25,
kearning: 0,
marginAfter: 0
}, {
name: "h2",
size: 70,
lineHeight: 1.25,
kearning: 0,
marginAfter: 0
}, {
name: "h3",
size: 70,
lineHeight: 1.25,
kearning: 0,
marginAfter: 0
}...
_
私がする必要があるのは、ヘッダー配列の指定されたインデックスでオブジェクトを置き換えることです。
this.setState(headers[1] = {obj})
のようにsetStateメソッドを使用してこれを行う方法はわかりませんが、明らかに無効です。私の現在の方法は、新しい配列を作成し、次のように古い配列を破壊しています。
__updateStyle(props) {
let newState = Object.assign({}, this.state)
newState.typeElements.headers[props.index] = props
this.setState(newState)
};
_
私の小さなハックのプロジェクトでは大丈夫だと思いますが、これは非常に重い手で、あらゆる規模のパフォーマンスの問題にすぐにつながると感じています。
更新:この回答はまだ賛成票を獲得しているため、以下の以前の回答は最新のJavaScriptとReactでは時代遅れになっていることに注意してください。 「更新」アドオンはレガシーになり、代わりに "immutability-helper" を使用できます。
React docsも理由を述べています 不変性が重要です 状態の変更を避けます。不変の更新には、Object.assign()
または スプレッド構文 これは、ネストされたheaders
オブジェクトとその配列要素のように、ネストのすべてのレベルで実行する必要があります。この特定の例では、配列インデックスをキーとして使用できるため、スプレッド演算子を使用して、配列の浅いクローンを作成し、クローン化された配列の指定されたインデックスの値として新しいオブジェクトを割り当てます。
_updateStyle (props) {
const { typeElements } = this.state;
const updatedHeaders = [...typeElements.headers];
updatedHeaders[props.index] = props;
this.setState({
...this.state,
typeElements: {
...typeElements,
headers: updatedHeaders
}
));
}
Spread構文を必要とせず、置換するオブジェクトを見つけるために配列インデックスを使用しない場合に必要な別のソリューションは、array.map
を使用して新しい配列を作成し、代わりに新しいオブジェクトを返すことです。指定されたインデックスの古いもの。
const updatedHeaders = typeElements.headers.map((obj, index) => {
return index === props.index ? props : obj;
});
Reduxドキュメントの同様の例でも "不変の更新パターン" を説明しています。
Reactには、このための不変性ヘルパーがいくつかあります。これについては、ドキュメントで説明しています: https://facebook.github.io/react/docs/update.html
あなたの場合、$ spliceコマンドを使用して、1つのアイテムを削除し、指定されたインデックスに新しいアイテムを追加できます。次に例を示します。
_updateStyle (props) { this.setState(update(this.state.typeElements, { $splice: [[props.index, 1, props]] } )); }
immutability-helper を使用します
素敵な例を見つけることができます
これを達成する方法のより良い説明を提供します。
update
はそのインデックスの要素setState
を新しいコレクションで呼び出しますimport update from 'immutability-helper';
// this.state = { employees: [{id: 1, name: 'Obama'}, {id: 2, name: 'Trump'}] }
updateEmployee(employee) {
const index = this.state.employees.findIndex((emp) => emp.id === employee.id);
const updatedEmployees = update(this.state.employees, {$splice: [[index, 1, employee]]}); // array.splice(start, deleteCount, item1)
this.setState({employees: updatedEmployees});
}
私はあなたのアイデアを得た。私が知る限り、setState()
メソッドは配列の子コンテンツを変更できません。そのため、代わりにそのメソッドを使用し、直接変更するだけです。
this.state.typeElements.headers[theIndex] = value;
ただし、直接変更すると、コンポーネントは再レンダリングされません。このメソッドで強制的に再レンダリングできます。
this.forceUpdate()
注:ただし、このプラクティスは悪いと見なされるため、注意してください。状態が不変であることを確認する必要があります。ここ 不変配列参照
Object.Assignは、ディープコピーではなくシャローコピーを使用します。
あなたの例では、Object.assign({}, this.state)
はstate
の最も近い子、つまりtypeElements
へのリンクのみをコピーしますが、headers
配列はコピーされないことに注意してください。
構文上の砂糖...
ES6のObject.Assignでは、Babelには特別なアドオン transform-object-rest-spread があります。
let newHeaders = { ...this.state.typeElements.headers};
newHeaders[index] = props.Something;
let newState = {...state, typeElements: { newHeaders }};