React中使用useState时控制台重复打印变量问题求助

问题根源分析 #

你的代码存在两个核心问题导致重复打印/请求：

1. 组件渲染时重复执行请求逻辑：你直接把console.log(key)和axios请求写在组件函数体的顶层，这意味着每次组件重新渲染（比如输入框变化、点击按钮更新状态）都会执行这段代码。加上React开发模式下的严格模式会强制组件双重渲染，自然会触发两次请求和打印。
2. submit状态未关联请求逻辑：点击按钮只是设置submit为true，但你并没有用这个状态来控制请求的触发时机，反而让请求在每次渲染都跑。

修复方案 #

1. 使用useEffect控制请求触发时机 #

通过useEffect监听submit状态的变化，只有当submit变为true时才发送请求，同时请求完成后重置submit状态，避免重复提交。

2. 优化输入框的状态更新逻辑 #

原来的getKey每次都会创建新对象，虽然功能没问题，但可以更简洁地更新状态，同时将输入框改为受控组件，保证状态与视图一致。

修复后的完整代码 #

import './App.css';
import { Button } from 'react-bootstrap';
import { useState, useEffect } from "react";
import axios from 'axios';

function App () {
  
  const [key, setKey] = useState({ keyword: '' });
  const [submit, setSubmit] = useState(false);

  // 优化输入框状态更新，保留原有状态的同时更新指定字段
  function getKey(val){
    setKey(prev => ({ ...prev, [val.target.name]: val.target.value }));
  }

  // 用useEffect监听submit状态，仅在提交触发时发送请求
  useEffect(() => {
    if (submit && key.keyword.trim()) { // 确保输入非空再发送请求
      console.log(key);
      axios
        .post('https://jsonplaceholder.typicode.com/posts', key)
        .then(response => {
          console.log(response);
        })
        .finally(() => {
          // 请求完成后重置submit状态，避免重复提交
          setSubmit(false);
        });
    }
  }, [submit, key]); // 依赖submit和key，状态变化时执行

  return (
    <>
      <div className="App">
        <h1>Type in the keyword you wish to search: </h1>
        <input 
          type="text" 
          name="keyword"
          value={key.keyword} // 受控组件，绑定value保证状态与视图同步
          onChange={getKey}
        /> 
        <Button onClick={() => setSubmit(true)}> Submit!</Button>
      </div>
    </>
  );
  
}

export default App;

额外说明 #

• React开发模式下的严格模式双重渲染是正常调试机制，生产环境会自动消失，但修复后的逻辑本身就只在点击提交时触发一次请求，所以无论开发还是生产环境都只会打印一次响应。
• 新增的非空判断可以避免用户点击空输入时发送无效请求，提升代码健壮性。

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