表单提交后Name与Location输入框无法重置问题求助

问题分析 #

1. Name输入框无法重置：原代码中setLoading(true)在fetch请求外部执行，会立即触发useEffect重新获取数据，干扰了setName("")的状态更新；同时需确保状态变量与setName的绑定逻辑正确。
2. Location输入框无法重置：setTrail(descriptions.nameInput[0])存在错误——descriptions对象不存在nameInput属性，且重置Location的意图是回到默认选项，应直接使用预设的options数组值。

修复后的核心逻辑代码 #

useEffect(() => {
  if (loading) {
    // 用Promise.all并行处理请求，避免竞态问题
    Promise.all([
      fetch("http://localhost:3000/Reviews").then(res => res.json()),
      fetch("http://localhost:3000/Description").then(res => res.json())
    ]).then(([reviews, descriptions]) => {
      setallReviews(reviews);
      setDescriptions(descriptions);
      setLoading(false);
    }).catch(error => {
      console.error("Fetch error: ", error);
      setLoading(false);
    });
  }
}, [loading]); 

const handleSubmit = async (e) => {
  e.preventDefault();
  const aReview = { nameInput, trailInput, reviewInput };

  try {
    const resp = await fetch("http://localhost:3000/Reviews", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(aReview),
    });
    await resp.json();
    
    // 重置表单状态
    setReview("");
    // 重置Location到第一个默认选项
    setTrail(options[0]);
    setName("");
    
    // 提交成功后再触发数据刷新
    setLoading(true);
  } catch (error) {
    console.error("Error: ", error);
  }
};

const options = [
  "Burke Lake Park",
  "Lake Accotink Park",
  "Armistead Park",
  "Cherrydale Park",
  "W & OD Trail"
]

关键修复说明 #

• Location重置修复：将错误的setTrail(descriptions.nameInput[0])替换为setTrail(options[0])，直接使用预设选项数组的第一个值作为重置后的默认值，匹配表单初始状态。
• Name重置修复：将setLoading(true)移到fetch请求成功的回调内（用async/await简化异步逻辑），避免请求未完成时就触发组件重新渲染，确保setName("")能正常执行。
• 竞态优化：使用Promise.all并行处理两个fetch请求，统一管理成功与错误回调，避免多个独立请求导致的状态更新混乱。

额外验证点 #

确保核心逻辑中状态变量的定义与表单props对应：

// 初始化状态与表单默认值匹配
const [nameInput, setName] = useState("");
const [trailInput, setTrail] = useState(options[0]);
const [reviewInput, setReview] = useState("");

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