ListView가있는 AsyncStorage는 네이티브로 반응합니다.

Question

안녕하세요, 사용자가 즐겨 찾기로 저장 한 항목을 보여줄 수있는 목록이있는 화면을 만들고 싶습니다. 원본 데이터를 유지하기 위해 로컬 json 파일을 사용합니다. 거기에서 AsyncStorage에 좋아하는 데이터를 저장하려고합니다. AsyncStorage 약속을 반환하고 상태에 추가 할 수 없습니다. 내가 어떻게 해? 당신이 약속대로 처리해야하므로

const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 
let a 
export default class List extends React.Component { 


    constructor(props) { 
    let resultData = new Array; 
    super(props) 
    const dataPoem = AsyncStorage.getItem('PoemDB', (err, result) => { 
     a = JSON.parse(result) 
     return result 

    }); 

    console.log 
    this.state = { 
    dataSource: ds.cloneWithRows(dataPoem), 
     counter: 1, 
     fontLoaded: false, 
    }; 

    } 

Answer 1

당신이 말한 바와 같이, AsyncStorage.getItem하는 약속를 반환합니다.

AsyncStorage.getItem()의 응답에 의존해야 처리 될 수 있습니다. then을 사용하여이 문제를 해결할 수 있습니다.

var dataPoem = function(){ 
    AsyncStorage.getItem('PoemDB').then((data) => { 
     this.setState({ 
     dataSource: ds.cloneWithRows(data), 
     }); 
    }); 
} 

또는 당신은 await를 사용하여 약속, ES7와 함께 개념 해결할 수 : 약속이 반환되면, 상태는 비동기 적으로 설정됩니다. 워드 프로세서에서 예 (https://facebook.github.io/react-native/docs/asyncstorage.html) :

try { 
    const value = await AsyncStorage.getItem('@MySuperStore:key'); 
    if (value !== null){ 
    // We have data!! 
    console.log(value); 
    } 
} catch (error) { 
    // Error retrieving data 
} 

또는, 당신은 당신의 자신의 약속을 만들고, resolve를 사용하여 약속을 반환 할 수 있습니다 :

var getFavouriteData = new Promise(function(resolve, reject){ 
    AsyncStorage.getitem().then((data) => { 
    resolve(data); 
    }); 
}); 

Answer 2

당신은 조건부 상태를 만들 필요가 없습니다를 이

constructor(props) { 

    super(props); 
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 

    this.state = { 
     dataSource: ds 
    } 

    } 

    componentDidMount = async() => { 
    try { 
     const value = await AsyncStorage.getItem('@MySuperStore:key'); 
     if (value !== null) { 
     this.setState({ 
      dataSource: this.state.dataSource.cloneWithRows(JSON.parse(value)) 
     }); 
     } 
    } catch (error) { 
     // Error retrieving data 
    } 

    } 

로 렌더링

render() { 
    return (
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(data) => this.renderRow(data)} 
     /> 
    ); 
    } 



renderRow = (data) => { 
    return (
    console.log(data); 
     <View> 
     <Text>.....<Text> 
     </View> 
    ); 
    } 

희망이 있으면 도움이 될 것입니다.