如何从 URL 获取数据，然后将其存储在 React Native 的 AsyncStorage 中？

Question

我正在尝试从 URL 获取数据，然后将其存储在 React Native 的 AsyncStorage 中。

这是“魔法”发生的屏幕：

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 打印数据。

这是我从 URL 调用的 .json 示例：

[
    {
        "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"
    }
]

我找不到任何类似的解决方案，所以如果有人有教程可以帮助我解决这个问题，我会很高兴。

编辑（更多解释）：

这就是我想做的： 如果设备已连接到 Internet，请使用来自 URL 的数据更新 AsyncStorage，然后在 AsyncStorage 中显示该新数据。如果设备未连接到 Internet，则仅显示 AsyncStorage 的数据。并且有多个“事件”，而不仅仅是示例中的一个。

Answer 1

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()
  }

这就是我完成工作的方式。希望这会有所帮助。

Answer 2

您需要像这样存储您的响应

注意一件事，当您将值设置为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.')
            }
}

希望对你有帮助