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

你的核心问题是调用guessHandling时没有传递按钮文本参数，同时需要确保服务器端正确解析JSON请求体，具体修改如下：

1. 修正客户端按钮的点击事件 #

在onClick回调中直接传入当前按钮的文本值option，这样guessHandling函数才能拿到正确的用户选择：

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

2. 确保服务器端配置JSON解析中间件 #

如果你的Express服务器没有配置解析JSON请求体的中间件，req.body会是空对象，导致userGuess显示undefined。需要在路由之前添加以下代码：

// 必须放在所有路由定义之前
app.use(express.json());

app.post('/guess', (req, res) => {
  console.log(req.body.userGuess); // 现在能正常打印按钮文本
  res.send({
    returnStatus: "Guess Recieved"
  });
});

关于useState的补充说明 #

如果想用状态存储用户选择，也可以这样实现（但直接传参数更简洁）：

const [userGuess, setUserGuess] = useState('');

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

// 按钮点击时先更新状态再调用函数
{question.options?.map((option, index) =>
    <button key={index} className={styles.answer} onClick={() => {
        setUserGuess(option);
        guessHandling();
    }}>{option}</button>)}

内容的提问来源于stack exchange，提问作者Dosya