React Native Save Response

Я учусь кодировать, используя React Native и использую его для взаимодействия с GitHub API. Я использую код ниже, чтобы получить данные обо всех моих уведомлениях.

Во-первых, он не отправляет вызов выборки после загрузки имени пользователя и пароля Asyncstorage. Он возвращает сообщение о необходимости аутентификации. Я делаю что-то не так с Asyncstorage? Он работал нормально, когда я использовал его на другой странице, за исключением того, что он не извлекался, как на componentDidMount, а только во время нажатия кнопок.

Я временно обошел аутентификацию, жестко закодировав свое имя пользователя и пароль, и это подводит меня ко второй проблеме. Я не могу использовать уведомления, которые я сохраняю в состояние. Что я делаю не так и как правильно использовать save.

Наконец, как я могу использовать сохраненный ответ с Flatlist для отображения всех заголовков уведомлений? Мне не удалось сохранить массив/словарь для перехода в Flatlist, поэтому я не знаю, как это сделать. Могу ли я просто передать сохраненный массив, как показано ниже:

<FlatList
    data={this.state.notidata}
    renderItem={this._renderItem}
  />

_renderItem = ({item}) => {
return (
  <TouchableHighlight
    underlayColor='#dddddd'>
    <View>
      <Text>{item.id}</Text>
    </View>
  </TouchableHighlight>
);
};

Фактический код

constructor() {
super();
this.state = {
    notidata: [],
    mainusername: '',
    mainpassword: '',
    showdone: '',
  };
}

componentDidMount () {
    let base64 = require('base-64');
    AsyncStorage.getItem("mainusername").then((value) => {
    this.setState({mainusername: value});
    })
    .then(
    AsyncStorage.getItem("mainpassword").then((value) => {
    this.setState({mainpassword: value});
    }).done())
    .then(
    fetch("https://api.github.com/notifications",{
      method: "GET",
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + base64.encode(this.state.mainusername + ':' + this.state.mainpassword),
      },
    })
    .then((response) =>  this.setState({
    notidata: response,
    })));
}

github-api react-native response asyncstorage react-native-flatlist
person Kenshin    schedule 04.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Нет необходимости хранить mainusername и mainpassword в состоянии, вы можете использовать свойство closure. Рассмотрим следующий фрагмент.

let base64 = require('base-64');
AsyncStorage.getItem('mainusername').then(username => {
  AsyncStorage.getItem('mainpassword').then(password => {
    fetch("https://api.github.com/notifications",{
      method: "GET",
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + base64.encode(username + ':' + password),
      },
    })
    .then((response) => response.json())
    .then(res => {
      this.setState({
        notidata: res
      });
    });
  });
});

Используя приведенный выше код, я смог получить все уведомления.

Теперь, что касается вашего последнего вопроса, как вы можете отобразить title, ответ: вам нужно обработать response в соответствии с вашими требованиями. Чтобы показать это в FlatList, вам нужно изменить последний .then в приведенном выше фрагменте.

.then(res => {
  let notis = [];
  Object.keys(res).forEach((val, index) => {
    notis.push({ data: res[val].subject.title, key: `litItem${index}` });
  });
  this.setState({
   notidata: notis
  });
});

Теперь установите свойство data для FlatList на this.state.notidata и в функции renderItem получите доступ к title как item.data.

Надеюсь, это поможет!

person Prasun    schedule 04.04.2018