Javascript 对事件作出反应-最佳实践

我们的团队是新的反应，我们正在学习最佳实践

团队目前最关心的问题之一是我们如何处理API调用和处理状态。我们遵循Reacts的建议-->“提升状态”。这一切都是可行的，但它导致我们的高级组件变得很大，并且经常处理API调用，我认为这不应该引起它的关注

下面的例子非常简单。实际上，每个fetch语句都需要设置一些不同事物的状态，例如loadingForA、statusForA、dataForA。。。。这很快导致一个非常大的状态和大量道具的传承

这里是否有可以使用的设计模式？我已经研究过“渲染道具”，但这似乎很难用于事件触发的API获取

例如：

class SelectorA extends Component {
   render(){
      return(
         <Dropdown
            onChange = {this.props.handleChange}
         >{this.props.data}</Dropdown>
         <p>{this.props.date}</p>
      )
   }


}


class App extends Component {
   constructor(props) {
        super(props);
        this.state = {
            date: '',
            dataA: {},
            dataB: {},
            dataC: {}
        };
    }
   handleChangeA() {
      fetch(someURL)
      .then(
         this.setState({dataA: fetchResult});
      )
    }

   handleChangeB() {
      fetch(someURL + this.state.dataA)
      .then(
         this.setState({dataB: fetchResult});
      )
   }

   handleChangeC() {
      fetch(someURL + this.state.dataC)
      .then(
         this.setState({dataC: fetchResult});
      )
   }

   render(){
      return(
         <SelectorA
             handleChange = {this.handleChangeA}

             date = {this.date}
             data = {this.dataA}
         />
         <SelectorB
             handleChange = {this.handleChangeB}

             date = {this.date}
             data = {this.dataB}
         />
         <SelectorC
             handleChange = {this.handleChangeC}

             date = {this.date}
             dataC = {this.dataC}
         />
      );
   }

}

类SelectorA扩展组件{
render（）{
返回(
{this.props.data}
{this.props.date}

)
}
}
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
日期：''，
dataA:{}，
数据库：{}，
dataC:{}
};
}
handleChangeA（）{
获取（someURL）
.那么(
this.setState（{dataA:fetchResult}）；
)
}
handleChangeB（）{
fetch（someURL+this.state.dataA）
.那么(
this.setState（{dataB:fetchResult}）；
)
}
handleChangeC（）{
fetch（someURL+this.state.dataC）
.那么(
this.setState（{dataC:fetchResult}）；
)
}
render（）{
返回(
);
}
}

我建议您正确阅读react文档。这里有一些不好的做法，首先是在react生命周期之外更新状态（通常在ComponentDidMount方法中调用fetch api。考虑到您现在开始使用React，我建议您使用React挂钩，这样您就不必担心生命周期，您可以在不编写类的情况下使用状态和其他React功能。感谢resposne。我已经更新了示例以打赌ter反映实际发生的情况。也就是说，我们使用以前获取的结果来创建下一次获取的url（查询参数）。我不确定如何利用此处的生命周期方法在更改时调用API。如果我更改SelectorA，那么这将如何触发handleChangeB？