如何在React.js中使用fetch从Flask REST API获取用户输入对应的预测结果

核心错误点 #

• Hook调用违规：useEffect 只能在组件顶层作用域调用，不能嵌套在 HandleSubmit 这类普通函数内部，这是你代码报错的直接原因
• 语法错误：拼接URL用的是普通双引号，不是模板字符串需要的反引号，且参数拼接格式不符合后端接口要求，缺少solute=、solvent=参数名，接口路径也错写为根路径，原本应该是/predict
• 未定义变量：代码中出现的form、FormData均未定义，你的表单状态存在state变量中，直接读取state.one、state.two即可
• 非法JSX标签：不存在<state>原生标签，你错误将状态变量当做标签使用，导致表单输入的事件绑定完全失效
• 状态初始值错误：表单状态是对象类型，你初始赋值为[{}]数组类型，取值逻辑会出错

完整修复后代码 #

import { useState } from 'react';

function App() {
  // 存储用户输入的溶质、溶剂表单状态
  const [formState, setFormState] = useState({
    solute: '',
    solvent: ''
  });
  // 存储预测结果
  const [predictResult, setPredictResult] = useState(null);
  // 加载状态，避免重复提交
  const [loading, setLoading] = useState(false);

  // 输入框内容变更处理
  function handleInputChange(e) {
    const { name, value } = e.target;
    setFormState(prev => ({
      ...prev,
      [name]: value
    }));
  }

  // 提交请求处理
  async function handleSubmit() {
    // 非空校验
    if (!formState.solute.trim() || !formState.solvent.trim()) {
      alert('请输入溶质和溶剂参数');
      return;
    }
    setLoading(true);
    try {
      // 拼接正确请求路径，对参数编码避免特殊字符解析错误
      const response = await fetch(`/predict?solute=${encodeURIComponent(formState.solute)}&solvent=${encodeURIComponent(formState.solvent)}`);
      if (response.ok) {
        const data = await response.json();
        setPredictResult(data);
        console.log('预测结果：', data);
      } else {
        alert('请求失败，请检查后端服务是否正常');
      }
    } catch (err) {
      console.error('请求错误：', err);
      alert('请求出错');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="App">
      <div>
        <fieldset>
          <legend>溶质（Solute）</legend>
          <input 
            name="solute" 
            value={formState.solute} 
            onChange={handleInputChange}
            placeholder="请输入溶质参数"
          />
        </fieldset>
        <fieldset>
          <legend>溶剂（Solvent）</legend>
          <input 
            name="solvent" 
            value={formState.solvent} 
            onChange={handleInputChange}
            placeholder="请输入溶剂参数"
          />
        </fieldset>
        <button 
          type="button" 
          onClick={handleSubmit}
          disabled={loading}
        >
          {loading ? '预测中...' : '提交预测'}
        </button>
        {/* 回显预测结果 */}
        {predictResult !== null && (
          <div style={{ marginTop: '20px', fontSize: '18px' }}>
            预测结果：<strong>{predictResult}</strong>
          </div>
        )}
      </div>
      {/* 原有组件保持不变 */}
      <Deploy />
    </div>
  );
}

注意事项 #

如果你的Flask后端和React前端没有做代理转发，需要把fetch的路径补全为后端完整地址，比如http://127.0.0.1:5000/predict（Flask默认端口为5000，3000一般是React开发服务的默认端口，不要混淆）。

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