如何在 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)}