React中展示API返回数据及用Hook处理POST请求的实现方案

一、在页面中展示API响应内容 #

你当前使用类组件实现登录功能，只需在组件状态中新增存储登录响应的字段，在请求回调中更新该状态，最后在页面渲染逻辑中输出即可：

修改后的类组件代码 #

import React, { Component } from "react";
import axios from "axios";
import { Button, TextField } from "@mui/material";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      password: "",
      loginResponse: "" // 新增存储响应的状态字段
    };
  }

  changeHandler = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  submitHandler = (e) => {
    e.preventDefault();
    // 提交前清空旧响应，避免干扰新结果
    this.setState({ loginResponse: "" });
    axios
      .post("http://localhost:8080/users/login", this.state)
      .then((response) => {
        // 将API返回内容存入状态
        this.setState({ loginResponse: response.data });
      })
      .catch((error) => {
        // 捕获请求错误，展示友好提示
        this.setState({ loginResponse: "请求出错，请稍后重试" });
      });
  };

  render() {
    const { name, password, loginResponse } = this.state;
    return (
      <div>
        <h1>登录页面</h1>
        <form onSubmit={this.submitHandler}>
          <TextField
            name="name"
            label="输入用户名"
            color="secondary"
            focused
            size="small"
            variant="outlined"
            onChange={this.changeHandler}
            id="name"
            value={name}
            type="text"
            placeholder="用户名"
            className="form-control"
          />
          <p />
          <TextField
            name="password"
            label="输入密码"
            color="secondary"
            focused
            size="small"
            variant="outlined"
            onChange={this.changeHandler}
            id="password"
            value={password}
            type="password" // 改为password类型隐藏输入内容，提升安全性
            placeholder="密码"
            className="form-control"
          />
          <p />
          <Button type="submit" variant="contained">
            登录
          </Button>
        </form>
        {/* 渲染登录响应结果，根据内容区分样式 */}
        {loginResponse && (
          <div style={{ 
            marginTop: '16px', 
            padding: '8px', 
            borderRadius: '4px', 
            backgroundColor: loginResponse.includes('Successful') ? '#e8f5e9' : '#ffebee' 
          }}>
            {loginResponse}
          </div>
        )}
      </div>
    );
  }
}

export default Login;

二、使用React Hooks处理POST请求 #

完全可以，推荐将类组件改写为函数组件，使用useState管理状态，useCallback优化函数性能：

函数组件版本代码 #

import React, { useState, useCallback } from "react";
import axios from "axios";
import { Button, TextField } from "@mui/material";

const Login = () => {
  // 用useState分别管理表单数据和登录响应
  const [formData, setFormData] = useState({ name: "", password: "" });
  const [loginResponse, setLoginResponse] = useState("");

  // 处理表单输入变化，用useCallback缓存函数避免重复创建
  const changeHandler = useCallback((e) => {
    setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }));
  }, []);

  // 处理表单提交，依赖formData更新函数
  const submitHandler = useCallback((e) => {
    e.preventDefault();
    setLoginResponse("");
    axios
      .post("http://localhost:8080/users/login", formData)
      .then((response) => {
        setLoginResponse(response.data);
      })
      .catch((error) => {
        setLoginResponse("请求出错，请稍后重试");
      });
  }, [formData]);

  return (
    <div>
      <h1>登录页面</h1>
      <form onSubmit={submitHandler}>
        <TextField
          name="name"
          label="输入用户名"
          color="secondary"
          focused
          size="small"
          variant="outlined"
          onChange={changeHandler}
          id="name"
          value={formData.name}
          type="text"
          placeholder="用户名"
          className="form-control"
        />
        <p />
        <TextField
          name="password"
          label="输入密码"
          color="secondary"
          focused
          size="small"
          variant="outlined"
          onChange={changeHandler}
          id="password"
          value={formData.password}
          type="password"
          placeholder="密码"
          className="form-control"
        />
        <p />
        <Button type="submit" variant="contained">
          登录
        </Button>
      </form>
      {/* 渲染响应结果 */}
      {loginResponse && (
        <div style={{ 
          marginTop: '16px', 
          padding: '8px', 
          borderRadius: '4px', 
          backgroundColor: loginResponse.includes('Successful') ? '#e8f5e9' : '#ffebee' 
        }}>
          {loginResponse}
        </div>
      )}
    </div>
  );
};

export default Login;

说明：

• 函数式写法代码更简洁，符合React当前的主流开发模式
• useCallback用于缓存事件处理函数，减少组件不必要的重渲染
• 如果后续表单逻辑变得复杂，也可以用useReducer替代useState管理状态，但当前场景下useState已足够

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