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

Question

我无法将按钮文本值发送回服务器。

客户端按钮代码：

{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 未定义，如上所示。

我也试过 including.value, .innerText, .innerHTML... 还是不行。

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

（可能？）我在 onClick 功能中遗漏了一些东西。我很想在这个问题上得到一些帮助。

Answer 1

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

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