Невозможно получить данные, используя выборку ReactNative - PullRequest
Новая
       6

Невозможно получить данные, используя выборку ReactNative

1 голос
/ 19 февраля 2020

Я пытаюсь получить данные из API (я создал свой собственный API Rest, используя JSON -server). Но я не могу ничего получить. Тем не менее, я могу видеть данные при переходе на localhost: 3000 / events. В моем приложении нет другой ошибки. Я получаю это только при запуске приложения, которое говорит, что сетевой запрос не выполнен. Все компоненты работают нормально. Просто не получаю данные. Я пробовал некоторые другие онлайн-API до сих пор не получил ответа. Я пытался с async / await. Я использую приложение с IOS, но попробовал и с Andriod. Та же проблема возникает. Прикрепление фрагментов кода. Любая помощь будет высоко ценится. Спасибо

Создана функция 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"
    }
  ]
}

1 Ответ

0 голосов
/ 19 февраля 2020

вы можете использовать ax ios на момент извлечения, он также используется для попадания в API и получения от них ответа, и это простой и легкий способ по сравнению с fetch .

Запустите npm i Reaction-native-ax ios в вашем проекте root floder для установки библиотеки и ее импорта и использования, вот пример ax ios, в котором пользователь войдет на экран и нажмет 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
  }
})

Не стесняйтесь сомнений.

...