React Native中使用fetch提交TextInput时nickname和email状态为undefined求助

Hey，我看了你的代码，发现几个可能导致nickname和email提交时返回undefined的问题，咱们一个个来解决：

你在Save按钮的onPress里，刚调用this.onSubmit()就立刻执行navigate('Home')——这会马上触发页面跳转，当前的Add组件直接被卸载，别说请求可能还没发完，就连读取this.state都可能因为组件卸载出问题。

修复方法：把跳转逻辑放到请求完成的回调里，确保提交成功后再跳走：

onPress= { () => {
  this.onSubmit()
    .then(() => {
      navigate('Home')
    })
    .catch(err => {
      console.error('提交失败啦:', err)
      // 这里可以加个错误提示，比如用Toast告诉用户提交失败
    })
} }

同时还要修正你的onSubmit方法，确保正确解析响应，并且只提交需要的字段：

onSubmit = () => {
  // 先打印当前state，确认nickname和email有没有值
  console.log('准备提交的内容:', this.state)
  return fetch(`你的接口地址`, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    // 只提交需要的字段，别把isLoading也发出去
    body: JSON.stringify({
      nickname: this.state.nickname,
      email: this.state.email
    })
  })
  .then((response) => {
    // 先检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求出错了，状态码: ${response.status}`)
    }
    // 必须解析响应为JSON，否则拿不到服务器返回的数据
    return response.json()
  })
  .then((responseJson) => {
    console.log('服务器返回的内容:', responseJson)
    return responseJson
  })
  .catch((error) => {
    console.error('请求失败的原因:', error)
    throw error;
  })
}

虽然你的TextInput绑定逻辑看起来没问题，但保险起见，可以在状态更新的回调里打印一下，确认输入时状态真的在更新：

// 第一个昵称输入框
onChangeText={(nickname) => this.setState({nickname}, () => {
  console.log('当前昵称:', this.state.nickname)
})}

// 第二个邮箱输入框
onChangeText={(text) => this.setState({email: text}, () => {
  console.log('当前邮箱:', this.state.email)
})}

如果这里打印出来是正常的，那问题肯定出在请求或跳转时机上；如果打印也是undefined，那要检查TextInput的value绑定是否正确（你的代码里是绑定了this.state.nickname和this.state.email的，应该没问题）。

如果前端打印的state明明有值，但服务器还是收到undefined，那要确认服务器端是否正确配置了解析JSON请求体的逻辑——比如用Express框架的话，有没有加express.json()中间件，不然服务器读不到JSON格式的请求内容。

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