React中如何在表单onSubmit时调用API并根据新值更新结果

问题原因&解决方案 #

1. 移除无用的useEffect #

你的需求是仅在用户点击提交按钮时拉取数据，组件首次挂载时不需要主动请求空文本的分析结果，因此这个空依赖的useEffect可以直接删除。

2. 修复提交后不更新结果的问题 #

提交后拿不到新结果主要是几个常见的逻辑疏漏导致：

• 没有对URL参数做编码：如果用户输入了特殊字符（比如&、空格、中文），会导致请求参数解析错误，后端拿不到正确的输入内容
• 请求走了浏览器缓存：fetch默认会复用相同URL的缓存结果，导致新提交的请求返回旧数据
• 缺少错误捕获：请求失败的情况下没有任何提示，无法判断是请求异常还是逻辑问题

3. 修复后的完整代码 #

import React, { useState } from 'react';

function TextArea() {
  const [text, setText] = useState('');
  const [score, setScore] = useState(null);
  // 新增加载、错误状态，提升用户体验
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  async function fetchData() {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(
        `https://lalala-sentiment-analysis.net/sentiment?message=${encodeURIComponent(text)}`,
        { cache: 'no-store' } // 禁用缓存，保证每次拿到新结果
      );
      if (!response.ok) throw new Error('请求失败，请稍后重试');
      const data = await response.json();
      setScore(data.score);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  function handleSubmit(event) {
    event.preventDefault();
    // 空值校验，避免提交无效内容
    if (!text.trim()) return;
    fetchData();
  }

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <label>Essay:</label>
        <textarea value={text} onChange={handleChange} />
        <input type='submit' value='submit' disabled={loading} />
      </form>
      {loading && <p>分析中...</p>}
      {error && <p style={{color: 'red'}}>{error}</p>}
      {!loading && !error && score !== null && <p>得分：{score}</p>}
    </>
  );
}

export default TextArea;

该场景的最佳实践 #

• 按需触发请求：不要滥用useEffect，只有当请求依赖的状态变化需要自动触发请求时才用useEffect，用户主动交互（点击提交）触发的请求直接在事件回调里调用即可
• 完善请求全链路状态：添加加载、错误状态，给用户明确的反馈，避免页面无响应的错觉
• 参数合法性校验：提交前先校验输入内容的合法性，减少无效请求
• 标准化请求处理：对URL参数做编码、根据需求配置缓存策略，避免非逻辑类的请求异常

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