在 React (Flux) 中重用不同状态的 Fetch

Question

我在顶层组件中有这个函数，我想重用它但处于不同的状态。在下面的代码示例中，我在 userData 上使用它，但我希望能够在一个名为 repoData 的状态上重用它，无论是在它的子组件内还是在外部。只是不确定如何去做，因为，如果我做一些类似将状态作为参数传递给它的事情，设置状态会引发错误，因为它看起来像：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）获取此数据。
一种可能的方法是将您的获取调用移动到一个单独的函数中，该函数将 return 在异步获取数据后将数据发送到您的组件。然后组件有责任按照它想要的方式处理数据。
因此，正如您所看到的，这里的关键点是识别和分离每段代码的职责。这样做的好处是干净的代码结构、更少的行数、可维护的代码以及最重要的是易于测试的代码。
我希望这能解决你的问题。如果您有兴趣了解更多此类技术，您可以阅读 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
它应该接受另一个参数，它是状态的新（片段）的名称
它还应该接受调用它的组件的 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

Reusing Fetch with Different Pieces of State in React (Flux)

javascript

reactjs

react-native

fetch-api