Javascript 在React（Flux）中使用不同的状态片段重用Fetch

我有一个顶级组件中的函数，我想重用它，但它处于不同的状态。在下面的代码示例中，我将在userData上使用它，但我希望能够在名为repoData的状态块上重用它，或者在它的子组件内，或者在它的外部。只是不知道该怎么做，因为如果我做一些像将状态作为参数传递给它这样的事情，设置状态会抛出一个错误，因为它看起来像：this.setState（{this.state.userData:data}）

---

我相信你的问题更多的是关于重构你的代码。在这里，您可以将其视为移出异步获取用户数据的逻辑。您的组件不需要知道是谁（

fetch

，

axios

）在为它提取数据。组件也不需要知道从何处（

https://api.github.com/users/“+params

）以获取此数据。
一种可能的方法是将fetch调用移动到一个单独的函数中，该函数将在异步获取数据后将数据返回到组件。然后，组件负责以其希望的方式处理数据。
因此，正如您所看到的，这里的关键点是识别和分离每段代码的责任。这样做的好处是干净的代码结构、更少的行数、可维护的代码，最重要的是易于测试的代码。
我希望这能解决你的问题。如果您有兴趣了解更多此类技术，您可以阅读有关干式原理和重构技术的内容

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

什么是JavaScript承诺：
获取的一些示例：

---

我个人建议使用axios。您可以在这里看到fetch和axios的比较：

如果我理解正确的话

• 您应该将函数移动到文件

  x.js

• 它应该接受另一个参数，它是新的（一个）状态的名称
• 它还应该为调用它的组件的

  this.setState

  接受一个参数
• 导入它并在

  componentDidMount

  中正常使用

```

你可以这样称呼它

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

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

---

这一切都是有道理的，但我对fetch和API是新手，看不到fetch返回了什么。我会将结果设置为变量还是什么？比如让userData=fetchUserData（params），然后将我的状态设置为userData？@JessieRichardson是的，我想你的方向是对的。为了构造代码，请查看我在这里提供的答案中的代码。如果这有助于你让我知道，否则我会尝试详细说明我的答案。对不起，我不太确定我是否明白。明天早上我再去看看。谢谢你！仍然需要帮助。@JessieRichardson我已经修改了我的答案并添加了一个代码示例，看一看我确实需要使用类似的东西，但是你发布的代码对我不起作用。似乎通过了这个。setState就是问题所在。我不断收到错误：“未处理的拒绝（TypeError）：无法读取未定义的属性'updater'”

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")