React中如何将Axios.get()返回值存入flag变量（SpringBoot+React项目）

刚好做过类似的场景，我给你写了完全贴合你需求的实现代码，每一步都对应你说的流程：

import React, { useState } from 'react';
import axios from 'axios';

const LoginComponent = () => {
  // *步骤1*：声明状态变量，管理用户名、密码和返回的flag
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [flag, setFlag] = useState(null);

  // *步骤4*：封装axios请求的方法
  const callFunction = (user, pwd) => {
    axios.get('/api/login', {
      params: {
        username: user,
        password: pwd
      }
    })
    .then(response => {
      // 进入THEN BLOCK
      const result = response.data; // 后端返回的true或false
      setFlag(result); // 赋值给flag变量
      console.log('服务器响应内容：', result); // 打印响应
    })
    .catch(error => {
      console.error('请求失败：', error);
      // 可选：请求失败时给flag设置默认值
      setFlag(false);
    });
  };

  // *步骤3*：handleChange方法，点击提交时触发
  const handleChange = () => {
    // 先简单校验输入不为空
    if (!username || !password) {
      alert('请输入用户名和密码');
      return;
    }
    // 调用callFunction方法
    callFunction(username, password);
  };

  return (
    <div>
      {/* *步骤1*：用户名和密码输入框 */}
      <input
        type="text"
        placeholder="用户名"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="密码"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      {/* *步骤2*：提交按钮，点击调用handleChange */}
      <button onClick={handleChange}>提交</button>
      
      {/* 可选：展示flag的值 */}
      {flag !== null && <p>验证结果：{flag ? '通过' : '失败'}</p>}
    </div>
  );
};

export default LoginComponent;

对应你要求的流程细节说明： #

• 步骤1：通过useState创建了用户名和密码的状态变量，输入框的onChange事件会实时更新这些变量，确保输入内容能被后续请求使用。
• 步骤2：提交按钮的onClick直接绑定了你指定的handleChange方法，点击就会触发后续逻辑。
• 步骤3：handleChange里先做了简单的输入校验，然后调用callFunction并传入用户名和密码参数。
• 步骤4：callFunction里用axios.get发起请求，在.then块里拿到后端返回的true/false后，用setFlag赋值给flag变量，同时打印响应内容；另外加了.catch块处理请求失败的情况，避免页面崩溃。

补充后端SpringBoot接口示例： #

你的后端需要提供一个接收用户名和密码参数的GET接口，返回boolean类型结果即可：

@GetMapping("/api/login")
public boolean login(@RequestParam String username, @RequestParam String password) {
  // 这里写你的用户名密码校验逻辑，返回true或false
  return "admin".equals(username) && "123456".equals(password);
}

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