React Native页面间传值：跨页收集表单参数并拼接JSON请求体咨询

前置修正 #

你预期的types:[type1:"a", type2:"b"]存在语法错误，数组无法存储键值对，需改为对象格式，对应状态初始化也需要调整：

// 屏幕1状态定义修正
const [Name, setName] = useState("")
const [Email, setEmail] = useState("")
// types改为对象类型，初始化值为空
const [Types, setTypes] = useState({type1: "", type2: ""})

// 最终请求体正确写法
body: JSON.stringify({
  name: Name,
  email: Email,
  types: Types
})

屏幕1 Types按钮onPress编写 #

利用React Navigation的路由参数传递回调函数，用于接收屏幕2返回的选中值：

<Button 
  onPress={() => navigation.navigate("screen_2", {
    // 传递更新types状态的回调给屏幕2
    onSave: (selected) => setTypes(selected)
  })}
>
  Types
</Button>

屏幕2 相关逻辑实现 #

屏幕2状态与参数获取 #

// 屏幕2内先定义两个下拉框的绑定状态
const [type1Val, setType1Val] = useState("")
const [type2Val, setType2Val] = useState("")
// 从路由参数中拿到屏幕1传过来的回调方法
const { onSave } = route.params

SAVE按钮onPress编写 #

<Button
  onPress={() => {
    // 组装选中的类型数据
    const selectedTypes = {
      type1: type1Val,
      type2: type2Val
    }
    // 调用回调更新屏幕1的types状态
    onSave(selectedTypes)
    // 返回到屏幕1
    navigation.goBack()
  }}
>
  SAVE
</Button>

请求体更新逻辑 #

屏幕1的Types状态会被屏幕2传过来的回调自动更新，你发起请求时直接使用当前的Types状态即可，不需要额外修改请求体生成逻辑，状态更新后对应字段会自动同步最新值。

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