React组件如何通过用户输入与API交互更新页面状态？

问题根源分析 #

• 函数组件中使用全局变量textfield：React组件只有在状态（useState/useReducer）或props变化时才会触发重渲染，修改全局变量不会触发组件更新，因此p标签内容不会变化。同时异步请求逻辑顺序错误，textfield = output在getInfo的Promise完成前就执行，根本拿不到接口返回的数据。
• 类组件中的handleSubmit逻辑错误：event.target指向表单元素而非输入框，event.target.value为空；且未阻止表单默认提交行为，页面会刷新导致状态重置。

正确的函数组件实现 #

用useState维护接口返回结果，异步请求完成后更新状态触发重渲染：

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

function Form() {
  const [name, setName] = useState("");
  const [result, setResult] = useState(""); // 用状态存储接口返回结果

  const handleSubmit = async (e) => {
    e.preventDefault(); // 阻止表单默认提交行为
    try {
      const resp = await axios.post("/hey_honey", { name });
      console.log(resp.data);
      setResult(JSON.stringify(resp.data)); // 更新状态，触发重渲染
    } catch (error) {
      console.error(error);
      setResult("请求出错，请重试");
    }
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          value={name} 
          onChange={(e) => setName(e.target.value)} 
        />
        <button type="submit">Get Collection's Gallery</button>
        <p>{result}</p>
      </form>
    </div>
  );
}

修正后的类组件实现 #

修正handleSubmit取值逻辑，同时阻止默认提交：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '', textfield: '' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault(); // 阻止页面刷新
    // 用state里的value，而非event.target.value
    this.setState({ textfield: this.state.value });
    // 如果是调用API，替换为以下逻辑
    // axios.post("/hey_honey", { name: this.state.value })
    //   .then(resp => this.setState({ textfield: JSON.stringify(resp.data) }))
    //   .catch(err => console.error(err));
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name
          <input 
            type="text" 
            value={this.state.value} 
            onChange={this.handleChange} 
          />
        </label>
        <input type="submit" value="Submit" />
        <p>{this.state.textfield}</p>
      </form>
    );
  }
}

疑惑解答 #

• 这不是表单元素的特有问题，核心是React的更新机制：只有状态或props变化才会触发组件重渲染，普通变量（包括全局变量）的修改不会触发更新。
• 博客评论功能不需要特殊组件，用普通表单配合状态管理即可实现，提交后更新状态展示评论即可。
• 表单不是一旦创建就不可变，React中采用受控组件模式：表单元素的值由组件状态控制，通过onChange更新状态，实现表单内容动态变化。
• 不需要把值导出到新组件，当前组件内维护状态就能实现UI更新；若需多组件共享数据，可使用Context或状态管理库（如Redux），单组件场景完全没必要。

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