无法使用 React Native fetch 获取数据答案

【问题标题】：Unable to get data using ReactNative fetch无法使用 React Native fetch 获取数据
【发布时间】：2020-06-03 16:19:36
【问题描述】：

我正在尝试从 API 获取数据（我使用 JSON 服务器创建了自己的 Rest API）。但我什么都拿不到。但是，当我导航到 localhost:3000/events 时，我能够看到数据。我的应用程序中没有其他错误。我只有在运行应用程序时才得到这个，它说网络请求失败。所有组件都工作正常。只是没有得到数据。我尝试了其他一些在线 API 仍然没有得到任何响应。我试过异步/等待。我正在使用带有 IOS 的应用程序，但也尝试过使用 Andriod。出现同样的问题。附上代码sn-ps。任何帮助将不胜感激。谢谢

创建了 getEvent 函数：

const { manifest } = Constants;
const api = manifest.packagerOpts.dev
  ? manifest.debuggerHost.split(`:`).shift().concat(`:3000`)
  : `api.example.com`;

const url = `http://${api}/events`;

export function getEvents() {
  return fetch(url)
  .then(response => response.json())
  .then(events => events.map(e => ({ ...e, date: new Date(e.date) })))
}

在 componentDidMount 中使用它

componentDidMount() {
    // getEvents().then(events => this.setState({ events }));

    setInterval(() => {
      this.setState({
        events: this.state.events.map(evt => ({
          ...evt,
          timer: Date.now()
        }))
      });
    }, 1000);

    this.props.navigation.addListener("didFocus", () => {
      getEvents().then(events => this.setState({ events }));
    });
  }

我正在尝试获取的数据。

{
  "events": [
    {
      "title": "Demo a new app",
      "date": "2020-03-29T13:45:18.000Z",
      "id": "001c9b6d-00a9-465c-a2d3-afb7176a0a87"
    }
  ]
}

【问题讨论】：

当您的服务器不工作或互联网连接不可用时，您将收到“网络请求失败”。所以请检查并使用相同的代码重试。在调试器中打印日志并检查。
我在连接到我自己的 REST API 时遇到了很大的问题，因为我的 url 也是错误的，请检查一下。
你能用 API 展示你的代码吗？ , 那有什么帮助呢
@AnujSharma 嗨 Anuj，我是 React Native 的新手，对 expo snap 不熟悉，你只是想让我在 expo snap 上上传项目并与你分享链接吗？你将如何使用我在本地运行的 Rest API？谢谢
是的，但是如果您在本地使用 API，那么我将无法检查您的 API，但是当我刚开始做出反应时，我使用 alerts 来检查数据流。您也可以通过在各个阶段设置警报来做到这一点，例如首先打印您传递给 API 的数据，使用 alert(JSON.stringify(data)); 然后检查您传递的天气是否正确数据到 API 与否。这对您有很大帮助，如果对您没有帮助，请告诉我。

标签： react-native react-native-android react-native-ios

【解决方案1】：

你可以使用 axios 作为 fetch ，它也可以用来点击 API 并从它们那里获取响应，与 fetch 相比，它是一种简单易用的方法。

在您的项目根目录上运行 npm i react-native-axios 以安装库并导入并使用它，这是 axios 的示例，其中用户将登录屏幕并点击登录 API，用户输入他们的凭据，如果它们在 API 中正确，则用户将获得响应或用户将成功登录。

    import axios from "axios";
export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      }
  };

  onPresssighnin = () => {
      var data = {
       //parameters to pass API
        Email: this.state.email,
        Password: this.state.password,
      };
      axios
        .post(" insert API url here", data, {
          "Content-Type": "application/json"
        })
        .then(
          response => {
           //get response here
            alert(JSON.stringify(response))
                      },
          error => {
            //get errormessage here
            errormessage = error.Message;
            alert(errormessage);
          }
        );
    }
  };
  render() {
      return (
              <View style={styles.logoContainer}>                
             <Input
                    borderless
                    placeholder="Email"
                    onChangeText={email => this.setState({ email })}
                    iconContent={
                      <Icon
                        size={16}
                        color={ditsTheme.COLORS.ICON}
                        name="ic_mail_24px"
                        family="DitsExtra"
                        style={styles.inputIcons}
                      />
                    }
                  />
                  <Input
                    password
                    borderless
                    placeholder="Password"
                    onChangeText={password =>this.setState({ password })}
                    iconContent={
                      <Icon
                        size={16}
                        color={ditsTheme.COLORS.ICON}
                        name="padlock-unlocked"
                        family="DitsExtra"
                        style={styles.inputIcons}
                      />
                    }
                  />

                    <Button
                      color="primary"
                      style={styles.createButton}
                      onPress={this.onPresssighnin} >
                      <Text bold size={14} color={ditsTheme.COLORS.WHITE}>
                        SIGN IN
                      </Text>
                    </Button>  
              </View>
      )
    }
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgb(32, 53, 70)',
    flexDirection: 'column',
  },
    buttonText: {
    textAlign: 'center',
    color: 'rgb(32, 53, 70)',
    fontWeight: 'bold',
    fontSize: 18
  }
})

不要怀疑。

【讨论】：