AsyncStorage.getItem 返回承诺 [英] AsyncStorage.getItem returning promise

问题描述

所以我尝试使用 AsyncStorage.getItem 获取数据，然后将其传递给 React-native 中的函数.但是当我这样做时，我从我的函数中收到了这个错误 "data.filter is not a function".我认为问题可能在于我没有得到数据而是做出了承诺.

So I am trying to get data with AsyncStorage.getItem and then pass it to a function in React-native. but when I do that I get this error "data.filter is not a function" from my function. I think that the problem could be that I am not getting the data but insted a promise.

构造函数:

constructor(props) {
        super(props)

        const getSectionData = (dataBlob, sectionId) => dataBlob[sectionId];
        const getRowData = (dataBlob, sectionId, rowId) => dataBlob[`${rowId}`];

        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2,
            sectionHeaderHasChanged : (s1, s2) => s1 !== s2,
            getSectionData,
            getRowData,
        });

        let data = AsyncStorage.getItem('connections').then((token) => {
            token = JSON.parse(token);
            return token;
        });            

        const {dataBlob, sectionIds, rowIds} = this.formatData(data);

        // Init state
        this.state = {
            dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIds, rowIds),
            left: true,
            center: false,
            right: false
        }
    }

功能:

formatData(data) {
    // We're sorting by alphabetically so we need the alphabet
    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

    // Need somewhere to store our data
    const dataBlob = {};
    const sectionIds = [];
    const rowIds = [];

    // Each section is going to represent a letter in the alphabet so we loop over the alphabet
    for (let sectionId = 0; sectionId < alphabet.length; sectionId++) {
        // Get the character we're currently looking for
        const currentChar = alphabet[sectionId];

        // Get users whose first name starts with the current letter
        const users = data.filter((user) => user.nickname.toUpperCase().indexOf(currentChar) === 0);

        // If there are any users who have a first name starting with the current letter then we'll
        // add a new section otherwise we just skip over it
        if (users.length > 0) {
            // Add a section id to our array so the listview knows that we've got a new section
            sectionIds.push(sectionId);

            // Store any data we would want to display in the section header. In our case we want to show
            // the current character
            dataBlob[sectionId] = { character: currentChar };

            // Setup a new array that we can store the row ids for this section
            rowIds.push([]);

            // Loop over the valid users for this section
            for (let i = 0; i < users.length; i++) {
                // Create a unique row id for the data blob that the listview can use for reference
                const rowId = `${sectionId}:${i}`;

                // Push the row id to the row ids array. This is what listview will reference to pull
                // data from our data blob
                rowIds[rowIds.length - 1].push(rowId);

                // Store the data we care about for this row
                dataBlob[rowId] = users[i];
            }
        }
    }

    return { dataBlob, sectionIds, rowIds };
    }

所以我的问题是，一旦我得到了承诺，我应该怎么做才能将它传递给我的函数并使这条线起作用const users = data.filter((user) => user.nickname.toUpperCase().indexOf(currentChar) === 0);?

So my question is once I have the promise what should I do with it in order to pass it to my function and make this line work const users = data.filter((user) => user.nickname.toUpperCase().indexOf(currentChar) === 0);?

推荐答案

是的，您不是在等待 promise 解决，您可以将外部函数转换为异步函数并 await for要解析的数据或您在 .then 中放入的任何内容都会在承诺解析后运行.也进入 componentDidMount.您可能还想查看 FlatList 而不是 ListView:

Yea you're not waiting for the promise to resolve, you can either turn the outer function in an async function and await for data to be resolved or whatever you put in the .then gets ran after the promise resolves. Also moving into componentDidMount. You might also want to look into FlatList instead of ListView:

componentDidMount(){ 
  AsyncStorage.getItem('connections').then((token) => {
    const token = JSON.parse(token);           

    const {dataBlob, sectionIds, rowIds} = this.formatData(token);

    // Update State
    this.setState({ 
      dataSource: ds.cloneWithRowsAndSections(dataBlob, sectionIds, rowIds)
    });

  });
}

这篇关于AsyncStorage.getItem 返回承诺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！