React Native开发中多个state项无法正常传递到其他屏幕问题求助

你出现该问题的核心原因是**嵌套state更新逻辑错误：
你在onChangeText中更新home对象时，直接将整个home对象替换为仅包含当前输入字段的新对象，会直接覆盖掉之前存储的其他输入字段内容。

比如你修改h1的输入时，执行的逻辑是：

this.setState({...this.state, home: {h1: inputtedValue}})

这里的home: {h1: inputtedValue}会直接把原有的home对象替换为只有h1属性的新对象，之前保存在h2、h3中的内容会被直接清空，自然只能保留最后一次修改的输入框内容。

不需要额外引入表单组件，只要修改state更新逻辑即可：
更新嵌套对象时，需要先展开原有home对象的所有属性，再覆盖要修改的单个字段，同时推荐使用函数式setState保证获取到的前序state是最新的：

// 以h1的输入框为例，h2、h3同理修改即可
<TextInput 
  value={this.state.home.h1}
  onChangeText={inputtedValue => this.setState(prevState => ({
    home: {
      ...prevState.home,
      h1: inputtedValue
    }
  }))}
  placeholder="Enter your first home fake iMessage here"
  style={styles.textInput}
/>

三个输入框的onChangeText都按上述逻辑调整后，所有输入内容都会正常保留，传递到输出页也能正常展示。

如果后续输入字段持续增加，为了避免重复写多个相似的更新逻辑，可以考虑引入Formik这类React Native表单库简化代码，当前场景修改现有逻辑即可满足需求。

内容的提问来源于stack exchange，提问作者Mark D. Foti