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

Posted 2023-02-16

【中文标题】将文本输入排序到数组中以获得简洁的异步存储代码

【英文标题】：Sorting text inputs into an array for concise async storage code

【发布时间】：2021-11-21 18:18:12

【问题描述】：

我有以下代码：

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

【问题讨论】：

我建议使用对象而不是数组，这样您就可以将TextInputs 绑定到属性。然后你可以只使用一个 saveInput 函数将对象保存到 asyncStorage。

【参考方案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>
  );

【讨论】：

对不起，我不太明白。如何将此关键参数分配给我的文本输入？我还应该把它放在我的代码中的什么地方？谢谢@uditkumar11

@Jay 现在看看...

非常感谢！！

对不起，它似乎不起作用。它只会说“未定义”，而不是保存我输入的文本。我在我正在制作的项目中尝试了此代码，并且完全复制了您的代码。我将编辑我的帖子以显示代码。

嗨@Jay，这个sn-p 只是为了给你一个想法。写了一个sn-p以使其更清楚。直播链接：yvkf3.csb.app，代码：codesandbox.io/s/romantic-moser-yvkf3?file=/src/App.js