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

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}
/>

标签： arraysreactjsreact-nativetextinputasyncstorage

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