javascript - React Fetch On Event - 最佳实践

Question

我们的团队是 React 的新手，我们正在学习最佳实践。

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

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

有没有可以在这里使用的设计模式？我已经研究过“渲染道具”，但这似乎很难用于事件触发的 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}
         />
      );
   }

}

标签： javascriptreactjsapidesign-patterns