Question

大家好日子！

我们有反应组件ClassWithMyData，它包含＆＃34; filter＆＃34;作为其中一个道具。在它的回合中，＆＃34;过滤＆＃34;是lists.ClassWithMyDataFilter接口的实例。

interface StateProps {
     filter: lists.ClassWithMyDataFilter;
}

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

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

}

export interface ClassWithMyDataFilter {
      attrs: api.ClassWithMyDataFilterAttrs
}

接口ClassWithMyDataFilter包含＆＃34; attrs＆＃34; - ClassWithMyDataFilterAttrs接口的实例;

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

任务是设置＆＃34; name＆＃34;和＃34;代码＆＃34;在this.ptops.filter.attrs中清空字符串＆＃34;＆＃34;使用clearFilter（）函数。现在我这样做：

private clearFilter = () => {

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

}

但有没有办法避免在功能内直接设置道具？我之前发现的问题和答案只涉及＆＃34;单一界面内部＆＃34;案例。但是，我如何才能正确设置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库

React + Typescript：set＆＃34; multilevel＆＃34;接口＆＃39;道具

1 个答案: