React中输入值作为API参数时请求不更新问题求助

核心问题 #

• useEffect未监听状态变化：你的useEffect依赖数组为空[]，仅在组件首次挂载时执行一次API请求，后续input状态变更不会触发重新请求。
• 模板字符串语法错误：模板字符串插入变量需用${变量名}，你写成了{input}，导致URL直接拼接字符串{input}而非实际输入值。
• 表单提交逻辑错误：
  • handleSubmit中获取输入值的写法e.target.name-products.value无效，正确方式是通过表单元素定位输入框；
  • 未阻止表单默认提交行为，点击搜索按钮会刷新页面，重置状态。
• input标签语法错误：type="text"应放在input标签内部，且input为自闭合标签。
• 状态未初始化默认值：input和products未设置初始值，可能引发undefined相关逻辑问题。

修复后的完整代码 #

function SearchProducts() {
  const [products, setProducts] = useState([]);
  const [input, setInput] = useState('');
  const [cart, setCart] = useState({});

  useEffect(() => {
    // 仅当输入值非空时发起请求，避免无效请求
    if (input.trim()) {
      axios.get(`https://dfv-ecom.eu/api/v3.1/${input}`)
        .then(res => setProducts(res.data))
        .catch(err => console.error('请求失败:', err)); // 新增错误捕获，便于排查问题
    }
  }, [input]); // 将input加入依赖数组，状态变更时自动重新执行请求

  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认提交行为
    const inputValue = e.target.elements['name-product'].value;
    setInput(inputValue);
  };

  const fetchCart = async () => {
    setCart(await commerce.cart.retrieve());
  };

  const handleAddToCart = async (productId, quantity) => {
    setCart(await commerce.cart.add(productId, quantity));
  };

  return (
    <div className="cont">
      <form onSubmit={handleSubmit}>
        <input id="name-product" type="text" />
        <button type="submit">搜索</button>
      </form>
    </div>
  );
}

额外优化建议 #

• 若需实时搜索，可给input绑定onChange事件实时更新input状态，无需依赖表单提交：

  <input 
    id="name-product" 
    type="text" 
    value={input}
    onChange={(e) => setInput(e.target.value)}
  />
  

• 增加加载状态提示，避免用户重复操作或不知情等待；
• 对输入值做防抖处理，减少频繁API请求（实时搜索场景适用）。

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