React Native + Expo项目：TextInput文本值无法更新的解决方案求助

问题根源 #

你的代码里，TextInput的value绑定的是item.text（来自原始数据或初始筛选的dataList），但onChangeText只更新了独立的newText状态，没有同步修改dataList中对应项的text字段。每次组件重新渲染时，TextInput会重新读取item.text的原始值，导致输入内容被覆盖，无法保存编辑结果。

解决方案 #

下面是修复后的完整代码，关键改动已标注：

import * as React from 'react';
import { StyleSheet, View, TouchableOpacity, Text, FlatList, SafeAreaView, TextInput } from 'react-native';
import { useState } from 'react'

const initialData = [
  {
    name: "Home content",
    text: "This is my homepage. Here I welcome you to my website",
    status: "Home"
  },
  {
     name: "About content",
    text: "Here I go into details about myself and my business",
    status: "About"
  },
  {
     name: "Contact content",
    text: "Here we give you information on how to contact us ",
    status: "Contact"
  }
]

const listTab = [
  { status: 'Home' },
  { status: 'About' },
  { status: 'Contact' },
]

export default function App() {
  const [status, setStatus] = useState('Home')
  // 初始化时使用原始数据的副本，避免修改原始数据
  const [dataList, setDataList] = useState([...initialData.filter(e => e.status === 'Home')])  

  const setStatusFilter = (targetStatus) => {
    // 切换标签时优先保留已编辑内容，再从原始数据补充未编辑项
    const filtered = initialData
      .map(item => {
        const editedItem = dataList.find(d => d.status === item.status)
        return editedItem || item
      })
      .filter(e => e.status === targetStatus)
    setDataList(filtered)
    setStatus(targetStatus)
  }

  // 处理文本变更：找到对应索引的项，创建新数组更新状态
  const handleTextChange = (index, newText) => {
    const updatedList = [...dataList]
    updatedList[index] = { ...updatedList[index], text: newText }
    setDataList(updatedList)
  }

  const renderItem = ({ item, index }) => {
    return (
      <View key={index} style={styles.itemContainer}>                    
        <Text style={styles.itemName}>{item.name}</Text>                     
        <TextInput
          style={styles.itemText}
          mode="outlined"
          multiline
          value={item.text}
          placeholder='FOR TEST' 
          placeholderTextColor={'gray'} 
          onChangeText={(text) => handleTextChange(index, text)}
        />
      </View>       
    )
 }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.listTab}>
        {
          listTab.map((e) => (
            <TouchableOpacity 
              key={e.status}
              style={[styles.btnTab, status === e.status && styles.btnTabActive]}
              onPress={() => setStatusFilter(e.status)}
            >
              <Text style={[styles.textTab, status === e.status && styles.textTabActive]}>{e.status}</Text>
            </TouchableOpacity>
          ))
        }          
      </View>    

      <FlatList
        data={dataList}
        keyExtractor={(e,i) => i.toString()}
        renderItem={renderItem}
      />    
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,        
    flexDirection: 'row',
    paddingHorizontal: 10,
    justifyContent: 'center'  
  },
  listTab: {
    backgroundColor: '#fff',    
    flexDirection: 'column',
    justifyContent: 'flex-start',
    marginTop: 20,    
    marginLeft: 5,    
    height: 100
  },
  btnTab: {
    width: 50,
    flexDirection: 'row',
    marginBottom: 10,
    paddingHorizontal: 15,
    paddingVertical: 10,
    justifyContent: 'center'
  },
  textTab: {
    fontSize: 16    
  },
  btnTabActive: {
    backgroundColor: 'purple',
    borderRadius: 5
  },
  textTabActive: {
    color: '#fff'
  },
  itemContainer: {    
    justifyContent: 'flex-end',
    paddingVertical: 15,
    marginLeft: 30,
    marginTop: 10
  },
  itemName: {
    fontWeight: 'bold',
    fontSize: 20,
    marginBottom: 5
  },
  itemText: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    padding: 8,
    minHeight: 100,
  }
});

关键改动说明 #

1. 移除无用状态：删除newText状态，直接修改dataList中的对应项，确保输入值和状态同步
2. 新增文本变更处理函数：handleTextChange通过索引定位要修改的项，创建数组副本更新状态（遵循React状态不可变原则）
3. 优化标签切换逻辑：setStatusFilter在切换标签时优先保留已编辑内容，避免丢失修改
4. 修复样式问题：给itemText添加边框样式，方便识别输入框范围
5. 添加key属性：给Tab的TouchableOpacity添加key属性，消除React警告

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