React组件query参数传递异常：搜索时始终传空值致数据不更新

核心问题：搜索触发页面刷新导致query重置为空 #

你的Navbar组件中，搜索按钮为type="submit"，点击时会触发表单的默认提交行为——页面重新加载，App组件的state被重置，query回到初始空字符串，因此每次搜索都会传递空值，始终显示全部数据。

解决步骤 #

1. 阻止表单默认提交行为

修改Navbar组件，给form添加onSubmit事件处理逻辑，阻止页面刷新并触发搜索：

function Navbar({ onSearchClicked }) {
  const [message, setMessage] = useState("");
  const handleChange = (event) => {
    setMessage(event.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止页面刷新
    onSearchClicked(message);
  };

  return (
    <nav className="navbar bg-body-tertiary">
      <div className="container-fluid">
        <form className="d-flex" role="search" onSubmit={handleSubmit}>
          <input
            id="message"
            name="message"
            className="form-control me-2"
            type="search"
            placeholder="Search"
            aria-label="Search"
            onChange={handleChange}
          />
          <button
            className="btn btn-outline-success"
            type="submit"
          >
            Search
          </button>
        </form>
      </div>
    </nav>
  );
}

2. 规范React Hooks顺序（可选但推荐）

AttacksGrid组件中，useState声明需放在useEffect之前，符合React Hooks的使用规则：

function AttacksGrid({ query }) {
  const [attacks, setAttacks] = useState([]); // 移至useEffect前
  console.log(`QUERY IS ${query}`);

  useEffect(() => {
    fetch(`http://127.0.0.1:9000/attacks?name=${query}&description=${query}`)
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        setAttacks(data);
      })
      .catch((err) => console.log(err));
  }, [query]);

  // 其余代码保持不变
}

额外说明 #

• 之前handleChange里的console.log(message)打印旧值，是因为setMessage是异步操作，这不会影响搜索功能，仅为日志显示问题，无需处理。
• 修复后点击搜索按钮不会刷新页面，query会正确传递给AttacksGrid组件，触发后端请求并更新列表数据。

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