React -表单提交+本地状态上的异步API调用

基础概念

React 是一个用于构建用户界面的 JavaScript 库。表单提交通常涉及用户输入数据的收集和处理。本地状态（state）是 React 组件内部的数据存储，用于管理组件的动态数据。异步 API 调用是指在不阻塞主线程的情况下，与服务器进行数据交互的操作。

类型

受控组件：表单元素的值由 React 状态控制。
非受控组件：表单元素的值由 DOM 直接控制。

应用场景

用户注册/登录：收集用户输入的信息并发送到服务器进行验证。
数据提交：将用户填写的表单数据发送到服务器进行处理。
实时搜索：用户在输入框中输入内容时，实时向服务器请求搜索结果。

常见问题及解决方案

问题：表单提交后，状态没有及时更新

原因：可能是由于异步 API 调用的回调函数中没有正确更新状态。

解决方案：

import React, { useState } from 'react';

const FormComponent = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [submitStatus, setSubmitStatus] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch('/api/submit', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });
      const result = await response.json();
      setSubmitStatus('提交成功');
    } catch (error) {
      setSubmitStatus('提交失败');
    }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <button type="submit">提交</button>
      <p>{submitStatus}</p>
    </form>
  );
};

export default FormComponent;