getting error 400 with axios post request & undefined error - node.js

Question

I'm making a project to store the data in mysql using react-native. and node.js server
but i faced two problems One is TypeError in object : undefined and the other is getting error 400 with axios post request. I trying to another way for solve second problem (chage the param to formData - but this is doesn't work error 404) Sorry if this is a stupid mistake, as i am new to working with react native and node.js.
React native code
onPress={() => {
AsyncStorage.getItem("pubKey").then(pubKey => {
AsyncStorage.getItem("name").then(name => {
const {
data: { article }
} = axios.post("http://127.0.0.1:4000/apply",null,{
params: {
articleId: id,
apubKey: pubKey,
name: name,
},
headers: {'Content-Type' : 'application/json'},
});
alert('지원 확인')
console.log(article)
})
})
}}
[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_axios$post.data.article')]
[Unhandled promise rejection: Error: Request failed with status code 400]
node.js (apply.js)
router.post("/", function (req, res) {
console.log("req.body.params: ",req.body)
console.log("req: ",req)
Article.findAll({
attributes: ["id", "db_pubKey", "db_title", "db_wtype"],
where: {
id: req.body.articleId
}
})
.then(result => {
console.log("result : " + JSON.stringify(result));
let DB2 = JSON.stringify(result);
let DB1 = JSON.parse(DB2);
let DB = DB1[0];
if (DB) {
console.log("DB", DB);
Apply.create({
db_apubKey: req.body.params.apubKey,
db_articleId: req.body.params.articleId,
db_opubKey: DB.db_pubKey,
db_title: DB.db_title,
db_wtype: DB.db_wtype,
db_name: req.body.params.name,
db_accept: null
})
.then(result => {
console.log("result : " + result);
res.status(201).json({ result: 1 });
})
.catch(err => {
console.error("err : " + err);
});
} else {
res.json({ result: 0 });
}
})
.catch(err => {
console.error("err : " + err);
next(err);
});
});

Answer 1

All API calls are asynchronous, so you need to handle an asynchronous action with proper strategies like async/await or then/catch method.
With the async/await method:
onPress={async () => {
try {
const pubKey = await AsyncStorage.getItem("pubKey")
const name = await AsyncStorage.getItem("name")
const result = await axios.post("http://127.0.0.1:4000/apply", null, {
params: {
articleId: id,
apubkey: pubKey,
name: name,
},
headers: {'Content-Type' : 'application/json'},
})
const article = await result?.data?.article
alert('지원 확인')
console.log(article)
} catch (error) {
// do proper action on error/failure cases
console.log(error)
}
}}
Note: don't forget to use catch method for your API calls.
Note: as a side note, you can't call an http URL in production application, it must be an https
Note: you might need to specify the article type and pass it.
About the 400 error on your backend side:
change this line router.post("/", function (req, res) { to :
router.post("/apply", function (req, res) {
// rest of the codes ...
You've forgotten to add your API name correctly.