Как извлечь данные из URL, а затем сохранить их в AsyncStorage в React Native?

Question

Я пытаюсь получить данные из URL, а затем сохранить их в AsyncStorage в React Native.

Это экран, на котором происходит "волшебство":

class CardsScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: null,
        }
    }

    componentDidMount() {
        return fetch(REQUEST_URL)
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseData,
                });
            })
        .catch((error) => {
            console.log(error)
        });
    }

    render() {

        if (netStatus) {

            if (this.state.isLoading) {
                return (
                    <View style={styles.container}>
                        <ActivityIndicator/>
                    </View>
                )
            } else {

                let data = this.state.dataSource.map((val, key) => {
                    return <View key={key} style={styles.itemWrapper}>
                        <View style={styles.titleWrapper}>
                            <Text style={styles.content}>{val.type}</Text>
                            <Text style={styles.title}>{val.title}</Text>
                            <Text style={styles.content}>{val.date}</Text>
                        </View>
                        <View style={styles.imageWrapper}>
                            <Image
                                style={styles.image}
                                source={{uri: val.image}}
                            />
                        </View>
                        <View style={styles.contentWrapper}>
                            <Text style={styles.content}>{val.adress}</Text>
                            <Text style={styles.content}>{val.text}</Text>
                        </View>
                    </View>

                })

                return (
                    <ScrollView contentContainerStyle={styles.containerScroll}>
                        {data}
                    </ScrollView>
                );
            }
        } else {
            return <View style={styles.contentWrapper}>
                <Text style={styles.content}>Not connected!</Text>
            </View>
        }
    }
};

Этот код печатает данные, если устройство подключено к Интернету. Что мне нужно сделать, это если устройство подключено к Интернету, получить данные с URL-адреса и сохранить (или перезаписать) их в AsyncStorage, а затем распечатать данные на экране. Если устройство не подключено к Интернету, просто распечатайте данные из AsyncStorage.

Это пример.json, который я звоню с URL:

[
    {
        "type": "Party",
        "title": "New party comming to town!",
        "adress": "New Yrok",
        "date": "20. 4. 2019.",
        "image": "https:\/\/some-url.com\/some-image.jpg",
        "text": [
            "Some description"
        ],
        "_id": "events_1"
    }
]

Я не могу найти никакого подобного решения, поэтому я был бы рад, если у кого-то есть учебник, который мог бы помочь мне в этом.

РЕДАКТИРОВАТЬ (немного больше объяснения):

Вот что я хочу сделать: если устройство подключено к Интернету, обновите AsyncStorage с данными из URL, а затем отобразите эти новые данные в AsyncStorage. Если устройство не подключено к Интернету, просто отобразите данные AsyncStorage. И есть несколько "событий", а не одно, как в примере.

Answer 1

Вы должны хранить свой ответ, как это

обратите внимание на одну вещь, когда вы устанавливаете значение в AsyncStorage вам нужно хранить как строку JSON.stringify() стоимость в хранилище.

    onSave = async () => {
           try {
                await AsyncStorage.setItem("key", JSON.stringify(responseData));
                Alert.alert('Saved', 'Successful');
            } catch (error) {
                Alert.alert('Error', 'There was an error.')
            }
        }

и когда вы получаете значение от AsyncStorage вам нужно JSON.parse()

onSave = async () => {
    try {
                const storedValue = await AsyncStorage.getItem("key");
                this.setState({ storedValue: JSON.parse(storedValue) });
            } catch (error) {
                Alert.alert('Error', 'There was an error.')
            }
}

надеюсь, это поможет вам

Answer 2

export default class BankDetails extends Component {
  constructor(props) {
    super(props)
    this.state = {
      userToken: null,
      userData: {
        nameOfBank: '',
        account_umber: '', 
        account_holder_ame: ''
      }
    }
  }
  
  async componentDidMount () {
    try {
      let value = await AsyncStorage.getItem('userData')
      let userDetails = JSON.parse(value)
      if (userDetails !== null) {

        let userData= Object.assign({}, this.state.userData)
        userData.nameOfBank = userDetails.nameOfBank
        userData.account_umber = userDetails.account_umber
        userData.account_holder_ame = userDetails.account_holder_ame

        this.setState({
          userToken: userDetails.token,
          userData
        })
      }
      } catch (error) {
        console.log(error)
    }
  } 
  onBankChange = (nameOfBank) => {
    this.setState({userData: {...this.state.userData, nameOfBank:nameOfBank}})
    }
  saveBankDetailsEdit = () => {
    const  { nameOfBank,account_umber, account_holder_ame }= this.state.userData
    let {userToken} = this.state
  
    var formData = new FormData()
    formData.append('bank', nameOfBank)
    formData.append('account_number', account_umber)
    formData.append('account_title', account_holder_ame)
  
    fetch('http://xxxx/update', {
      method: 'POST',
      headers: {
        'X-API-KEY': '123456',
        'Authorization': userToken
      },
      body: formData
    }).then(function (response) {
       console.log(response)
       AsyncStorage.getItem('userData').then(
        data => {
          data = JSON.parse(data)
          data.nameOfBank = nameOfBank
          data.account_umber = account_umber
          data.account_holder_ame = account_holder_ame
          AsyncStorage.setItem('userData', JSON.stringify(data))
        }
      )
       let data = JSON.parse(response._bodyText)
       Alert.alert(data.message)
    })
    .catch((error) => {
      console.log(error)
    })
    .done()
  }

Вот как я сделал свою работу. Надеюсь это поможет.