Question

因此，无缘无故，我无法从本地服务器读取任何json数据。日志猫中没有消息表明有问题。

这就是我在做什么。我首先将localhost服务器启动为

json-server --watch db.json -p 3001 -d 2000

，然后取回它，这很好。

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3001/dishes
  http://localhost:3001/comments
  http://localhost:3001/promotions
  http://localhost:3001/leaders
  http://localhost:3001/feedback

  Home
  http://localhost:3001

接下来，我启动react native应用npm run android并在模拟器中看到它。

我将基本网址声明为：

  export const baseUrl ='http://IP_GOES_HERE:3001/';

我的IP地址没有更改。

这是我的提取文件。

import * as ActionTypes from './ActionTypes';
import { baseUrl } from '../shared/baseUrl';

export const fetchComments = () => (dispatch) => {
    return fetch(baseUrl + 'comments')
    .then(response => {
        if (response.ok) {
          return response;
        } else {
          var error = new Error('Error ' + response.status + ': ' + response.statusText);
          error.response = response;
          throw error;
        }
      },
      error => {
            var errmess = new Error(error.message);
            throw errmess;
      })
    .then(response => response.json())
    .then(comments => dispatch(addComments(comments)))
    .catch(error => dispatch(commentsFailed(error.message)));
};

export const commentsFailed = (errmess) => ({
    type: ActionTypes.COMMENTS_FAILED,
    payload: errmess
});

export const addComments = (comments) => ({
    type: ActionTypes.ADD_COMMENTS,
    payload: comments
});

export const fetchDishes = () => (dispatch) => {

    dispatch(dishesLoading());

    return fetch(baseUrl + 'dishes')
    .then(response => {
        if (response.ok) {
          return response;
        } else {
          var error = new Error('Error ' + response.status + ': ' + response.statusText);
          error.response = response;
          throw error;
        }
      },
      error => {
            var errmess = new Error(error.message);
            throw errmess;
      })
    .then(response => response.json())
    .then(dishes => dispatch(addDishes(dishes)))
    .catch(error => dispatch(dishesFailed(error.message)));
};

export const dishesLoading = () => ({
    type: ActionTypes.DISHES_LOADING
});

export const dishesFailed = (errmess) => ({
    type: ActionTypes.DISHES_FAILED,
    payload: errmess
});

export const addDishes = (dishes) => ({
    type: ActionTypes.ADD_DISHES,
    payload: dishes
});

export const fetchPromos = () => (dispatch) => {

    dispatch(promosLoading());

    return fetch(baseUrl + 'promotions')
    .then(response => {
        if (response.ok) {
            return response;
        } else {
            var error = new Error('Error ' + response.status + ': ' + response.statusText);
            error.response = response;
            throw error;
        }
        },
        error => {
            var errmess = new Error(error.message);
            throw errmess;
        })
    .then(response => response.json())
    .then(promos => dispatch(addPromos(promos)))
    .catch(error => dispatch(promosFailed(error.message)));
};

export const promosLoading = () => ({
    type: ActionTypes.PROMOS_LOADING
});

export const promosFailed = (errmess) => ({
    type: ActionTypes.PROMOS_FAILED,
    payload: errmess
});

export const addPromos = (promos) => ({
    type: ActionTypes.ADD_PROMOS,
    payload: promos
});

export const fetchLeaders = () => (dispatch) => {

    dispatch(leadersLoading());

    return fetch(baseUrl + 'leaders')
    .then(response => {
        if (response.ok) {
            return response;
        } else {
            var error = new Error('Error ' + response.status + ': ' + response.statusText);
            error.response = response;
            throw error;
        }
        },
        error => {
            var errmess = new Error(error.message);
            throw errmess;
        })
    .then(response => response.json())
    .then(leaders => dispatch(addLeaders(leaders)))
    .catch(error => dispatch(leadersFailed(error.message)));
};

export const leadersLoading = () => ({
    type: ActionTypes.LEADERS_LOADING
});

export const leadersFailed = (errmess) => ({
    type: ActionTypes.LEADERS_FAILED,
    payload: errmess
});

export const addLeaders = (leaders) => ({
    type: ActionTypes.ADD_LEADERS,
    payload: leaders
});

export const postFavorite = (dishId) => (dispatch) => {
    setTimeout(() => {
        dispatch(addFavorite(dishId));
    }, 2000);
}

export const addFavorite = (dishId) => ({
    type: ActionTypes.ADD_FAVORITE,
    payload: dishId
});

export const addComment = (comment) => ({
    type: ActionTypes.ADD_COMMENT,
    payload: comment
});

export const postComment = (dishId, rating, comment, author) => (dispatch) => {
    const newComment = {
        dishId: dishId,
        rating: rating,
        author: author,
        comment: comment
    };
    newComment.date = new Date().toISOString();

    return fetch(baseUrl + 'comments', {
        method: 'POST',
        body: JSON.stringify(newComment),
        headers: {
            "Content-Type": "application/json"
        },
        credentials: "same-origin"
    })
    .then(response => {
        if(response.ok) {
            return response;
        } else {
            var error = new Error('Error' + response.status + ': ' + response.statusText);
            error.response = response;
            throw error;
        }
    },
    error => {
        throw error;
    })
    .then(response => response.json())
    .then(response => setTimeout(() => {dispatch(addComment(response))}, 2000))
    .catch(error => { console.log('post comments', errorr.message); alert('Your comment cannot be posted\nError: ' + error.message); });
};

一切都很好。为什么我得到这个？我清理了项目，但还是一无所获

./gradlew clean

谢谢，西奥。

Answer 1

问题可能是您的json服务器正在import React from "react"; import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap"; import "./Login.css"; class Login extends React.Component { constructor(props) { super(props); this.state = { data: [] }; this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(event) { event.preventDefault(); fetch('/users') .then(response => response.json()) .then(data => this.setState({ data })) console.log(this.state.data[0]); } render() { return ( <div className="Login"> <form onSubmit={this.handleSubmit}> <FormGroup controlId="email" bssize="large"> <FormLabel>Email</FormLabel> <FormControl autoFocus type="email" value={this.email} //onChange={e => setEmail(e.target.value)} /> </FormGroup> <FormGroup controlId="password" bssize="large"> <FormLabel>Password</FormLabel> <FormControl value={this.password} // onChange={e => setPassword(e.target.value)} type="password" /> </FormGroup> <Button block bssize="large" type="submit"> Login </Button> </form> </div> ); } } export default Login;处提供数据，但是android仿真器的本地主机与计算机的本地主机不同。

您需要让json服务器在您的本地IP地址上提供数据，以便移动设备可以通过LAN进行访问。您可以通过在命令行中输入主机IP地址来实现。

代替：

json-server --watch db.json -p 3001

使用：

json-server --watch db.json -p 3001 -H [your_local_IP]

然后您的手机可以通过LAN访问数据。

网络请求失败-React Native

1 个答案: