如何在ReactJS+ExpressJS中向服务器发送按钮的文本值



我在将按钮文本值发送回服务器时遇到问题。

客户端按钮的代码:

{question.options?.map((option, index) =>
<button key={index} className={styles.answer} onClick={() => guessHandling()}>{option}</button>)}

客户端onClick guessHandling函数的代码:

const guessHandling = async (userGuess) => {
const res = await axios.post('/api/guess', { userGuess });
setStatusMessage(res.data.returnStatus);
};

服务器端的代码:

app.post('/guess', (req, res) => {
console.log(req.body.userGuess);   // <---- I RECIEVE "UNDEFINED" IN THE SERVER CONSOLE HERE. 
res.send({
returnStatus: "Guess Recieved"
});
});

当我尝试console.log时,userGuess是未定义的,如上所示。

我还尝试过包含.value、.innerText、.innerHTML…仍然不起作用。

我尝试使用useState,但我不知道如何将按钮文本插入状态(这是这个问题的主要问题(。

(可能吧?(我在onClick功能中遗漏了一些内容。。我很想在这个问题上得到一些帮助。

正如Elan Hamburger在评论中所写,解决方案很简单:

您实际上并没有将值传递到对guessHandling的调用中。尝试:onClick={((=>guessHandling(option(}

最新更新