在React Native中插入带有TextInput值的数据，不能向API发送默认值

Question

我有一个屏幕，有TextInput's。我试图通过API将这些TextInput's的值插入数据库。在没有输入TextInput的情况下提交时，我会使用TextInput中显示的值数据，但是使用下面的代码，我一直得到field is requiredstatus: 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);
});
};