React Native中如何修改数组状态实现输入框值同步更新？

现有如下数组：

const data = [
  {a1 : 23},
  {a1 : 22},
  {a1 : 11},
  {a1 : 15},
]

通过map渲染出对应数量的TextInput组件，初始值对应数组中a1的值：

{
  data.map((v)=>{
     <TextInput
        value ={v.a1},
        placeholder ="enter value"
     />
  })
}

需求：修改任意输入框的值后，点击按钮同步更新原数组（或状态数组）对应项的a1值，例如将第三个输入框改为50后，数组变为：

[
  {a1 : 23},
  {a1 : 22},
  {a1 : 50},
  {a1 : 15},
]

核心思路 #

React/React Native中只有状态更新会触发组件重新渲染，因此需要将原始数组转为状态管理，同时通过onChangeText跟踪输入值，最后以不可变方式更新状态数组。

以下提供两种实现方式：

方式一：实时更新状态数组 #

输入时立即同步更新状态数组，无需点击按钮：

import { useState } from 'react';
import { View, TextInput, StyleSheet } from 'react-native';

export default function App() {
  // 将原始数组转为状态
  const [dataArray, setDataArray] = useState([
    {a1: 23},
    {a1: 22},
    {a1: 11},
    {a1: 15},
  ]);

  // 处理输入变化
  const handleInputChange = (text, index) => {
    // 不可变更新：创建数组副本，修改对应项后更新状态
    const updatedArray = [...dataArray];
    // 将输入字符串转为数字，空值时设为0（可根据需求调整）
    updatedArray[index] = { a1: parseInt(text) || 0 };
    setDataArray(updatedArray);
  };

  return (
    <View style={styles.container}>
      {dataArray.map((item, index) => (
        <TextInput
          key={index} // 必须添加唯一key，避免渲染警告
          style={styles.input}
          value={item.a1.toString()} // TextInput的value需为字符串类型
          placeholder="enter value"
          onChangeText={(text) => handleInputChange(text, index)}
          keyboardType="numeric" // 限制为数字键盘，提升输入体验
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    gap: 10,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 4,
  },
});

方式二：点击按钮批量更新 #

先临时存储输入值，点击按钮后再同步更新状态数组：

import { useState } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';

export default function App() {
  const [dataArray, setDataArray] = useState([
    {a1: 23},
    {a1: 22},
    {a1: 11},
    {a1: 15},
  ]);
  // 临时存储输入框的值，初始化为数组a1的字符串形式
  const [tempInputs, setTempInputs] = useState(
    dataArray.map(item => item.a1.toString())
  );

  // 处理输入变化，仅更新临时存储
  const handleInputChange = (text, index) => {
    const updatedTemp = [...tempInputs];
    updatedTemp[index] = text;
    setTempInputs(updatedTemp);
  };

  // 点击按钮时同步更新状态数组
  const handleUpdateData = () => {
    const updatedArray = tempInputs.map(text => ({
      a1: parseInt(text) || 0
    }));
    setDataArray(updatedArray);
  };

  return (
    <View style={styles.container}>
      {dataArray.map((item, index) => (
        <TextInput
          key={index}
          style={styles.input}
          value={tempInputs[index]}
          placeholder="enter value"
          onChangeText={(text) => handleInputChange(text, index)}
          keyboardType="numeric"
        />
      ))}
      <Button title="更新数据" onPress={handleUpdateData} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    gap: 10,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 4,
  },
});

关键注意事项 #

1. 状态不可变性：永远不要直接修改原始状态数组，必须通过创建副本的方式更新，否则React无法检测到状态变化。
2. TextInput的value类型：value属性必须是字符串，因此需要将数字转为字符串（toString()），否则会出现警告。
3. key属性：map渲染组件时必须添加唯一key，推荐使用数据本身的唯一ID，无ID时可用索引替代。
4. 输入值转数字：输入内容是字符串，需要通过parseInt()或Number()转为数字，同时处理空输入的情况（示例中设为0，可根据业务调整）。

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