React Native输入控件设置初始值后无法编辑或自动重置问题求助

你遇到的这个问题我之前也踩过坑！核心原因是你没有用React的状态管理机制来维护输入数据——你直接修改了普通的JavaScript对象scores，但React根本检测不到这种变化，所以组件不会重新渲染，导致Picker和TextInput看起来像是“卡住”在初始值，哪怕你已经修改了对象里的数值。

React组件的UI更新是依赖状态（useState）或者属性（props）变化触发的，普通对象的修改不会触发重渲染，所以Picker的selectedValue始终停留在初始的scores.positive值，自然看起来无法编辑。

下面是修复后的完整代码，我帮你调整了状态管理的部分：

import { useState } from 'react';
import { View, Text, StyleSheet, Picker } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  // 用useState初始化带初始值的状态，这是React组件管理可变数据的正确方式
  const [scores, setScores] = useState({ positive: 1, negative: 2 });

  const setScore = function(direction, scoreText) {
    const score = parseInt(scoreText);
    console.log(`Set ${direction} to ${score}, 当前值: ${JSON.stringify(scores)}`);
    // 不要直接修改原状态对象，通过扩展运算符创建新对象来更新状态
    // 这样React才能检测到状态变化，触发组件重渲染
    setScores(prevScores => ({
      ...prevScores,
      [direction]: score
    }));
  };

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        现在选择下拉选项，就能看到正常更新啦！
      </Text>
      <Picker
        onValueChange={(itemValue, itemIdx) => setScore('positive', itemValue)}
        // 注意：Picker的Item value是字符串类型，要和selectedValue类型匹配
        selectedValue={scores.positive.toString()}
      >
        <Picker.Item key="1-0" label="0" value="0" />
        <Picker.Item key="1-1" label="1" value="1" />
        <Picker.Item key="1-2" label="2" value="2" />
        <Picker.Item key="1-3" label="3" value="3" />
        <Picker.Item key="1-4" label="4" value="4" />
      </Picker>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

这里还有几个关键要点需要注意：

• 必须使用React状态：不管是函数组件的useState还是类组件的this.state，这是React跟踪数据变化、触发UI更新的核心机制，普通对象做不到这点。
• 不可变更新原则：更新状态时永远不要直接修改原对象，要通过扩展运算符、Object.assign或者其他方式创建新对象/数组，这样React才能识别到状态发生了变化。
• 值类型要匹配：Picker.Item的value默认是字符串类型，所以selectedValue要和它保持类型一致（比如把数字转成字符串），否则会出现选中状态不匹配的问题。
• TextInput的同理处理：如果是TextInput，也要用同样的逻辑——把value绑定到状态，onChangeText里更新状态，示例如下：

  <TextInput
    value={scores.positive.toString()}
    onChangeText={(text) => setScore('positive', text)}
    keyboardType="numeric"
    style={{ borderWidth: 1, padding: 8, margin: 16 }}
  />
  

这样修改后，你的输入控件就能正常显示初始值，并且响应用户的输入更新了！

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