将文本输入排序到一个数组中，以获得简洁的异步存储代码

Question

我有以下代码：

export default function App() {
const [input1, setInput1] = useState('');
const [input2, setInput2] = useState('');
// Async storage for input1
const storeData = async (value) => {
try {
await AsyncStorage.setItem('input1', value)
} catch (e) {
// Saving error
}
}
const getData = async () => {
try {
const value = await AsyncStorage.getItem('input1')
if(value !== null) {
// Value previously stored
setInput1(value)
}
} catch(e) {
// Error reading value
}
}
useEffect(() => { 
storeData(input1)
},[input1])
return (
<View style={styles.container}>
<View>
<Text>Text</Text>
<Text>{'n'}</Text>
<TextInput
onChangeText={(text) => setInput1(text)}
value={input1}
placeholder="Add text here"
/>
<Text>{'n'}</Text>
<TextInput
onChangeText={(text) => setInput2(text)}
value={input2}
placeholder="Add text here"
/>
</View>
</View>
);
}

我需要保持代码的简洁性，不希望每个文本输入都有多个异步存储代码。在这个例子中，我只有两个，但我想拥有更多。我如何将这些文本输入排序到一个数组中，并仅使用一批异步存储代码存储它们？感谢

编辑：

const [mon1, setMon1] = useState('');
const [tue1, setTue1] = useState('');
const [wed1, setWed1] = useState('');
const [thu1, setThu1] = useState('');
const [fri1, setFri1] = useState('');
const [sat1, setSat1] = useState('');
const [sun1, setSun1] = useState('');
const [keys, setKeys] = useState('');
const storeData = async (key, value) => {
try {
await AsyncStorage.setItem(key, value)
} catch (e) {
// Saving error
}
}
const getData = async (key) => {
try {
const value = await AsyncStorage.getItem(key)
if(value !== null) {
// Value previously stored
setMon1(value)
}
} catch(e) {
// Error reading value
}
}
useEffect(() => { 
storeData(keys[keys.length-1],mon1)
},[mon1])

<TextInput
style={styles.cellText}
onChangeText={(text) => {
setMon1(text);
setKeys(prev=>[...prev,`input${keys.length}`])
}}
value={mon1}
placeholder="Tap to add tasks!"
underlineColorAndroid="transparent"
maxLength={70}
multiline
numberOfLines={4}
/>

Answer 1

在存储和检索数据时再传递一个参数。这是一个例子。

const [keys, setKeys] = useState([]);

我们需要这个来存储所有的密钥。

const storeData = async (value, key) => {
try {
await AsyncStorage.setItem(key, value)
} catch (e) {
// Saving error
}
}

这是的完整代码

export default function App() {
const [input1, setInput1] = useState('');
const [input2, setInput2] = useState('');
const [keys, setKeys] = useState('');
// Async storage for input1
const storeData = async (key, value) => {
try {
await AsyncStorage.setItem(key, value)
} catch (e) {
// Saving error
}
}
const getData = async (key) => {
try {
const value = await AsyncStorage.getItem(key)
if(value !== null) {
// Value previously stored
setInput1(value)
}
} catch(e) {
// Error reading value
}
}
useEffect(() => { 
storeData(keys[keys.length-1],input1)
},[input1])
return (
<View style={styles.container}>
<View>
<Text>Text</Text>
<Text>{'n'}</Text>
<TextInput
onChangeText={(text) => {
setInput1(text);
setKeys(prev=>[...prev,`input${keys.length}`])
}
value={input1}
placeholder="Add text here"
/>
<Text>{'n'}</Text>
<TextInput
onChangeText={(text) => setInput2(text)}
value={input2}
placeholder="Add text here"
/>
</View>
</View>
);
}