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

Question

我正在尝试从URL获取数据，然后将其存储在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>
        }
    }
};

如果设备连接到Internet，则此代码会打印数据。我需要做的是，如果设备连接到Internet，从URL获取数据并在Asyncstorage中获取（或覆盖），然后在屏幕上打印数据。如果设备未连接到Internet，则只需从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中显示该新数据。如果设备未连接到Internet，则只需显示异步的数据即可。并且有多个"事件"，而不仅仅是一个示例中的事件。

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.')
            }
}

希望它能帮助您