如何将多TextInput值存入数组，复用AsyncStorage简化存储逻辑

核心逻辑是将所有输入框的内容统一存储在一个状态对象中，仅通过一套AsyncStorage读写逻辑完成全量数据的持久化，无需为每个输入框单独编写存储代码。

完整代码实现 #

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const styles = StyleSheet.create({
  container: {
    padding: 20
  },
  cellText: {
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    marginVertical: 10,
    paddingVertical: 5
  }
})

export default function App() {
  // 统一管理所有输入框的状态，新增输入框只需要在这里加对应的key即可
  const [inputValues, setInputValues] = useState({
    mon1: '',
    tue1: '',
    wed1: '',
    thu1: '',
    fri1: '',
    sat1: '',
    sun1: ''
  });

  // 全量存储所有输入数据
  const storeAllInputs = async (data) => {
    try {
      // AsyncStorage仅支持存储字符串，所以需要将对象转为JSON字符串
      await AsyncStorage.setItem('all_input_data', JSON.stringify(data));
    } catch (e) {
      // 存储异常处理
      console.error('存储输入数据失败:', e);
    }
  };

  // 全量读取所有输入数据
  const getAllInputs = async () => {
    try {
      const storedData = await AsyncStorage.getItem('all_input_data');
      if (storedData !== null) {
        // 把JSON字符串转回对象赋值给状态
        setInputValues(JSON.parse(storedData));
      }
    } catch (e) {
      // 读取异常处理
      console.error('读取输入数据失败:', e);
    }
  };

  // 组件加载时读取本地存储的数据
  useEffect(() => {
    getAllInputs();
  }, []);

  // 输入内容变化时自动全量存储到本地
  useEffect(() => {
    storeAllInputs(inputValues);
  }, [inputValues]);

  // 统一的输入内容更新方法
  const handleInputChange = (inputKey, text) => {
    setInputValues(prevState => ({
      ...prevState,
      [inputKey]: text
    }));
  };

  return (
    <View style={styles.container}>
      {/* 周一输入框 */}
      <Text>周一任务</Text>
      <TextInput
        style={styles.cellText}
        onChangeText={(text) => handleInputChange('mon1', text)}
        value={inputValues.mon1}
        placeholder="点击添加任务！"
        underlineColorAndroid="transparent"
        maxLength={70}
        multiline
        numberOfLines={4}
      />

      {/* 周二输入框，仅需修改传入的key即可，不需要额外新增状态和存储逻辑 */}
      <Text>周二任务</Text>
      <TextInput
        style={styles.cellText}
        onChangeText={(text) => handleInputChange('tue1', text)}
        value={inputValues.tue1}
        placeholder="点击添加任务！"
        underlineColorAndroid="transparent"
        maxLength={70}
        multiline
        numberOfLines={4}
      />

      {/* 其余周三到周日的输入框按照上面的格式新增即可，无需修改其他逻辑 */}
    </View>
  );
}

方案优势 #

• 新增输入框仅需要在初始状态inputValues中添加对应键，无需单独声明useState和编写存储逻辑，代码重复度极低
• 仅保留一套读写逻辑，后续维护调整只需要修改两处存储相关函数即可
• 所有输入数据统一管理，后续需要做批量清空、导出等操作时可以直接操作inputValues对象，无需逐个字段处理

内容的提问来源于stack exchange，提问作者Jay