Question

我正在学习使用react native进行编码并使用它与GitHub API进行交互。我使用下面的代码来获取所有通知的数据。

首先，它在加载Asyncstorage用户名和密码后没有发送fetch调用。它返回一个身份验证所需的消息。我是否在使用Asyncstorage做错了什么？当我在不同的页面中使用它时它工作得很好，除了在componentDidMount上没有获取，但只在按下按钮期间。

我通过硬编码我的用户名和密码暂时绕过了身份验证，这让我想到了第二个问题。我无法使用我保存的notidata状态。我做错了什么，如何使用正确保存。

最后，如何将已保存的响应与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,
    })));
}

Answer 1

无需将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的{{1}}属性设置为FlatList，并在this.state.notidata函数中，将renderItem设置为title。

希望这会有所帮助！

反应原生保存响应

1 个答案: