Question

所以我有一个Parent组件，在其中我将状态设置为'userData'并将其传递给Child组件。现在，我的Child组件对该数据进行了更多处理，现在需要将经过过滤的结果传递到新的状态props中，例如allServiceData。我曾尝试在Parent状态下创建相同的变量，并在Child上执行“ return setState”操作，但它似乎不起作用。如何使用子组件在App状态下添加带有数据的新变量？这是我处理数据的正确方法吗？

父母： `

constructor(props) {
        super(props);
        this.state = {
            userData: [],
            allServices: [],
        };
      }
<Subs userData={this.state.userData} />

`

孩子： `

getSub = (data) => {
        let services = this.props.userData.filter(dat => {
            return dat.subscription_id === data;
        }).map(data =>{
            this.setState({
             allServices: services})
        });
  `

Answer 1

执行state lifting。另外，如果您不想重新渲染子组件，则无需在子组件中setState。

只需使用状态提升功能将经过过滤的数据传递给父级即可。

父母：

callParentMethod=(services)=>{

    //do stuff here with services

}

渲染：

<Subs userData={this.state.userData} callParentMethod = {this.props.callParentMethod}/>

在儿童中：

getSub = (data) => {
    let services = this.props.userData.filter(dat => {
        return dat.subscription_id === data;
    })

    this.props.callParentMethod(services);
}

Answer 2

您要过滤服务，然后进行映射，以遍历过滤后的服务，并在每次遍历过滤后的服务时设置状态。

首先进行过滤，然后设置状态。

getSub = (data) => {
        let services = this.props.userData.filter(dat => {
            return dat.subscription_id === data;
        });

        this.setState({
            allServices: services
        });

Answer 3

您不应在子组件中使用setState。您的父容器应具有所有setState逻辑，子组件应为纯功能组件。对于这种情况，要在父组件中更新状态，您需要将作为道具的功能传递给子组件，并在父组件中访问它以更新状态。在这里，您需要将getSub函数移动到父组件。父母：

`getSub = (data) => {
    let services = this.props.userData.filter(dat => {
        return dat.subscription_id === data;
    });

    this.setState({
        allServices: services
    });
 } 

 <Subs userData={this.state.userData}
   getSub={this.getSub} />`

在子组件中，您将需要作为道具来访问

使用子组件添加App状态？

3 个答案: