React Native提交TextInput数据时默认值无法传入API报422错误

返回422必填字段校验失败的核心原因是你写在TextInput上的静态value根本不会同步到提交逻辑读取的变量中：

• 你给输入框硬编码了value="steve"、value="fle91739"，这两个值只是页面渲染的静态展示内容，从来没有赋值给提交时使用的name、userid变量
• 用户没有手动触发输入操作时，onChangeText回调不会执行，setUsername、setEventid不会被调用，此时提交传参里的name、userid都是undefined，后端校验必填规则不通过自然报错
• 另外代码存在变量名不匹配问题：第一个输入框更新的状态是username，提交时传的参数是name，就算用户输入了内容，只要没有单独定义name变量，传参仍然是空值

把默认值直接设置到状态的初始参数中，让输入框的value完全和状态绑定，不要在组件属性上硬编码脱离状态的静态value：

// 初始化状态时直接设置默认值，和预期展示的默认内容保持一致
const [username, setUsername] = useState("steve");
const [userid, setUserid] = useState("fle91739");

const pressHandle = ({ name, userid }) => {
  axios
    .post(userPostLink, {
      name,
      userid,
    })
    .then((response) => {
      console.log(response.data);
    })
    .catch((error) => {
      console.log(error.response);
    });
};

组件渲染部分改为绑定状态值：

<TextInput 
  onChangeText={(text) => setUsername(text)} 
  placeholder="username" 
  value={username} 
/>
<TextInput 
  onChangeText={(text) => setUserid(text)} 
  placeholder="userid" 
  value={userid} 
/>

<TouchableOpacity onPress={() => pressHandle({ name: username, userid: userid })}>
  <Text style={{ color: "blue" }}>Submit</Text>
</TouchableOpacity>

修改后逻辑完全符合预期：用户未输入内容时，直接用状态初始化的默认值提交；用户修改过输入内容，就用输入后更新的状态值提交，不会再出现页面展示值和实际提交值不一致的问题。

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