Question

我有这个函数，它位于我想要重用的顶级组件中，但是在不同的状态下。在下面的代码示例中，我在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
        })
      })
  }

Answer 1

您的问题更多是关于重构您的代码我相信。在这里，您可以将其视为异步获取用户数据的逻辑。您的组件无需知道谁（fetch，axios）正在为其获取数据。此外，组件不需要知道从哪里（https://api.github.com/users/' + params）获取此数据一种可行的方法是将fetch调用移动到一个单独的函数中，该函数在异步获取数据后将数据返回给组件。然后，组件的责任是按照它想要的方式处理数据因此，您可以看到这里的关键点是确定并分离出每段代码的职责。这样做的好处是干净的代码结构，更少的行数，可维护的代码以及最重要的易于测试的代码我希望这能解决你的问题。如果您有兴趣了解此类技术，可以阅读 DRY原则和重构技术。

编辑1：
我已创建此代码示例供您参考

什么是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

Answer 2

如果我正确理解你

您应该将该功能移至文件x.js
它应该接受另一个param，它是新（状态）状态的名称
它还应该接受调用它的组件this.setState的参数。
导入并正常使用componentDidMount

```

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

您可以按如下方式调用

import { fetchUserDate } from "./path/to/x"

fetchUserDate("param" , this.setState, "xOnState")

在React（Flux）中重用Fetch与不同的状态块

2 个答案: