我具有此功能,该功能位于我想重用的顶级组件中,但处于其他状态。在下面的代码示例中,我在userData上使用了它,但是我希望能够在状态为repoData的状态下重用它,既可以在其子组件内,也可以在外部。只是不确定如何去做,因为如果我做类似将状态传递为args的事情,则将状态设置为会引发错误,因为它看起来像这样:this.setState({this.state.userData:data}) 。

    fetchUserData(params) {
        fetch('https://api.github.com/users/' + params)
        .then(response => {
          if (!response.ok) {
            throw Error("Network failure")
          }
        return response;
        })
      .then(data => data.json())
      .then(data => {
        this.setState({
          userData: data
        })
      }, () => {
        this.setState({
            requestFailed: true
        })
      })
  }

最佳答案

我认为您的问题更多是关于重构代码。在这里,您可以将其视为异步获取用户数据的逻辑。您的组件不需要知道谁(fetchaxios)正在为它获取数据。此外,组件也不需要从where(https://api.github.com/users/' + params)知道要获取此数据。
一种实现方法是将fetch调用移到一个单独的函数中,该函数将在异步获取数据后将数据返回到组件。然后,组件负责以所需的方式处理数据。
因此,正如您所看到的,关键是识别并分离出每段代码的职责。这样做的好处是代码结构清晰,行数少,可维护的代码以及最重要的是易于测试的代码。
我希望这能解决您的问题。如果您有兴趣进一步了解此类技术,则可以阅读有关DRY原理和重构技术的信息。

编辑1:
我已创建此代码示例供您参考
javascript - 在React(Flux)中重用具有不同状态的提取-LMLPHP

什么是JavaScript承诺:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
一些要提取的样本:https://davidwalsh.name/fetch
我个人建议使用axios。您可以在此处查看fetch和axios的比较:https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5

关于javascript - 在React(Flux)中重用具有不同状态的提取,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48220755/

10-11 22:15
查看更多