React + Typescript： "マルチレベル"インターフェース '小道具を設定

Question

おはよう！

私たちは反応成分ClassWithMyDataを持っています。これには、その小道具の1つとして「フィルター」が含まれています。その時、 "filter"はlists.ClassWithMyDataFilterインターフェースのインスタンスです。 "ATTRS" が含まClassWithMyDataFilter

interface StateProps { 
    filter: lists.ClassWithMyDataFilter; 
} 

interface StoreProps { 
    clearFilter:() => void; 
} 

class ClassWithMyData extends React.Component<StoteProps & StateProps, {}> { 

} 

export interface ClassWithMyDataFilter { 
     attrs: api.ClassWithMyDataFilterAttrs 
} 

インターフェース - ClassWithMyDataFilterAttrsインタフェースのインスタンス。

export interface ClassWithMyDataFilterAttrs { 
     code: string; 
     name: string; 
} 

タスクはclearFilter（）関数を使用して空の文字列「」にthis.ptops.filter.attrsの「名前」と「コード」を設定することです。 今、私はそれをこのようにやっている：

private clearFilter =() => { 

this.props.filter.attrs.code = ""; 
this.props.filter.attrs.name = ""; 
this.props.updateFilter (this.props.filter); 

} 

をしかし、関数内で設定する小道具直接回避する方法はありますか？私が以前に見つけた質問と回答は、「1つのインターフェイス内クラス」のケースだけをカバーしていました。しかし、どうすれば正しく設定できますか？this.props.interface1.interface2.value？

ご利用いただきありがとうございます。私は条件を混乱させていただければ幸いです。

Answer 1

Props are read-only、あなたが変異してはならないオブジェクト

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

private clearFilter =() => { 
this.props.updateFilter ({attrs:{code:"", name:""}}); 
} 

それともattrsに他のプロパティで呼び出す必要がある場合は、スプレッド演算子を使用することができます

を

private clearFilter =() => { 
    this.props.updateFilter ({attrs:{...this.props.filter.attrs, code:"", name:""}}); 
} 

一般に、階層内のすべてのオブジェクトを作成する必要があります。

cont newInterface1 = {...interface1, interface2:{...interface1.interface2, value:"newValue"}} 

あなたのことを行うことは悪い習慣ですなぜあなたはまた、immutability-helperライブラリ