React本机中的持久状态挂钩

Question

这是我在React Native中的第一个应用程序。我在React方面几乎没有经验，但我一直在使用Vue。我也是国家管理的新手。我已经开始使用钩子，但在线教程中显示了没有钩子的示例。

我的问题是，我如何坚持我用钩子设置的状态？我想保存项目，即使在没有互联网的情况下打开应用程序。

import React, { useState, useEffect } from 'react'
import axios from 'axios'
import Geolocation from '@react-native-community/geolocation'
import { FlatList, ActivityIndicator, Text, View } from 'react-native'
axios.defaults.baseURL = 'http://www.json.test/api/'
export default () => {
const [loading, setLoading] = useState(true)
const [projects, setProjects] = useState([])
const [position, setPosition] = useState({
latitude: 0,
longitude: 0,
})
const getProjects = async () => {
// console.log()
const projects = await axios(
`projects/${position.latitude}/${position.longitude}`,
)
setProjects(projects.data)
setLoading(false)
}
useEffect(() => {
if (position.latitude != 0 && position.longitude != 0) {
getProjects()
}
}, [position])
useEffect(() => {
Geolocation.getCurrentPosition(
pos => {
setPosition({
latitude: pos.coords.latitude,
longitude: pos.coords.longitude,
})
},
error => console.log(error.message),
)
}, [])
if (loading) {
return (
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator
style={{
flex: 1,
padding: 20,
alignContent: 'center',
justifyContent: 'center',
}}
/>
</View>
)
}
return (
<View style={{ flex: 1, paddingTop: 80, paddingLeft: 50 }}>
<FlatList
data={projects}
renderItem={({ item }) => (
<View style={{ marginBottom: 20 }}>
<Text style={{ fontWeight: 'bold', fontSize: 16 }}>
{item.project_name}, {item.id}
</Text>
<Text>{item.project_description}</Text>
<Text style={{ fontStyle: 'italic' }}>
{Number(item.distance.toFixed(2))} Km
</Text>
</View>
)}
keyExtractor={(item, index) => index.toString()}
/>
{/* <Text>{position.latitude}</Text> */}
</View>
)
}

我在网上搜索了一下，但教程似乎只关注react，而不是本地的react。谢谢你的帮助！

Answer 1

您可以使用AsynStorage实现持久性。

对于AsyncStorage+挂钩，请查看react本机挂钩/异步存储库。

下面是一个简单的代码示例：

import useAsyncStorage from '@rnhooks/async-storage';
function App() {
const [storageItem, updateStorageItem, clearStorageItem] = useAsyncStorage(
key,
);
return (
<View style={styles.container}>
<Text style={styles.type}>{`Storage Value: ${storageItem}`}</Text>
<Button
title="Update Item"
onPress={() => updateStorageItem('Test String')}
/>
<Button title="Clear Item" onPress={() => clearStorageItem()} />
</View>
);
}