React Native TextInput插入与更新问题：编辑时输入框内容无法修改

嘿，我瞅了你的代码，马上就发现问题出在哪了——TextInput的状态绑定和更新没对上，咱们一步步来解决：

核心问题分析 #

你看哈，你的TextInput把value绑在了this.state.shopDetail.shopName上，但onChangeText里却更新的是this.state.shopName。这就导致你输入的时候，虽然shopName状态变了，但TextInput显示的还是shopDetail里的旧值，自然看起来就像没法修改一样。另外你的updateCustomer函数逻辑也得调整调整。

具体修复步骤 #

1. 统一状态变量的绑定

首先得让TextInput的显示值和你输入时更新的状态保持一致：

• 要是处于编辑模式，组件挂载或者进入编辑状态时，把shopDetail里的店铺名同步到shopName状态里：

componentDidMount() {
  if (this.state.mode === 'edit') {
    // 把数据库里的旧值同步到可编辑的状态变量
    this.setState({ shopName: this.state.shopDetail.shopName });
  }
}

然后修改TextInput的value属性，改成绑定this.state.shopName：

<TextInput
  underlineColorAndroid='transparent'
  style={styles.input}
  returnKeyType={"next"}
  autoFocus={true}
  placeholder="Shop Name"
  onChangeText={(text) => this.setState({ shopName: text })}
  value={this.state.shopName} // 这里和onChangeText更新的状态对应上
/>

2. 修正更新函数的逻辑

你的updateCustomer现在只是给customerregVOObj赋值，没把最新的输入值正确同步到数据库，也没更新界面状态。调整成这样：

updateCustomer = () => {
  // 先拿到输入框里的最新值
  const newShopName = this.state.shopName;
  // 更新要提交的对象
  customerregVOObj.shopName = newShopName;
  
  if (this.state.mode === 'edit') {
    // 调用更新接口把数据提交到数据库
    customer.updateCustomer(JSON.stringify(customerregVOObj));
    // 同步更新界面显示的shopDetail，确保编辑后界面显示最新值
    this.setState({
      shopDetail: { ...this.state.shopDetail, shopName: newShopName }
    });
  } else {
    customerregVOObj._id = 'abc';
    customer.createCustomer(customerregVOObj);
  }
}

3. 确保初始状态正确

在组件的构造函数里，要保证编辑模式下shopName有初始值，不然输入框可能会是空的或者显示旧值：

constructor(props) {
  super(props);
  this.state = {
    mode: props.mode || 'new', // 可以从props传入模式
    shopName: '',
    shopDetail: props.shopDetail || {} // 从数据库获取的客户详情
  };
  
  // 编辑模式下初始化shopName
  if (this.state.mode === 'edit') {
    this.setState({ shopName: this.state.shopDetail.shopName || '' });
  }
}

额外提醒 #

• 要是你从数据库拉取shopDetail后，没同步到shopName状态，编辑时输入框就一直会显示旧数据，这一步一定要注意。
• 提交更新后，最好重新拉取一次最新的数据库数据并更新状态，这样界面和数据就能完全同步啦。

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