在React Native中插入具有TextInput值的数据，无法将默认值发送到API

Question

我有一个具有textInput's的屏幕。我正在尝试通过API将这些textInput的值插入数据库。当提交而无需输入textInput中时，我将使用textInput中显示的值数据，但是在我的下面代码时，我会得到five>字段是必需 <代码>状态：422 。

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="steve" />
<TextInput onChangeText={(text) => setEventid(text)} placeholder="userid" value="fle91739" />

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

Answer 1

首先，您想更改JSX，使用DefaultValue来设置这些默认值。

<TextInput
   onChangeText={text => setUsername(text)}
   placeholder="username"
   value={name}
   defaultValue="steve"
 />
<TextInput
    onChangeText={text => setEventid(text)}
    placeholder="userid"
    value={userid}
    defaultValue="fle91739"
/>

并将您的PressHandle更改为：

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