React组件Props未更新：深入解析表单提交导致的页面刷新问题与解决方案

import React, { useState } from "react";
// 引入 Navbar 和 AttacksGrid 组件

function App() {
  const [query, setQuery] = useState(""); // 初始化 query 为空字符串

  const searchClicked = (keyword) => {
    console.log(`setting query to: ${keyword}`); // 调试信息：确认 query 是否被设置
    setQuery(keyword); // 更新 query 状态
  };

  return (
    <div>
      <Navbar onSearchClicked={searchClicked} />
      <AttacksGrid query={query} /> {/* query 作为 prop 传递给 AttacksGrid */}
    </div>
  );
}

export default App;

import React, { useState, useEffect } from "react";

function AttacksGrid({ query }) {
  console.log(`QUERY IS ${query}`); // 调试信息：观察 AttacksGrid 接收到的 query 值
  const [attacks, setAttacks] = useState([]);

  useEffect(() => {
    // 当 query 变化时，重新获取数据
    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.error("Error fetching attacks:", err));
  }, [query]); // 依赖数组包含 query，确保 query 变化时 useEffect 重新执行

  return (
    <table className="table table-dark">
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Description</th>
          <th scope="col">Platforms</th>
          <th scope="col">Detection</th>
          <th scope="col">Phase</th>
        </tr>
      </thead>
      {/* 遍历 attacks 数组渲染表格行 */}
      {attacks.map((attack) => (
        <tbody key={attack.ID}>
          <tr>
            <th scope="row">{attack.NAME}</th>
            <td>{attack.DESCRIPTION}</td>
            <td>{attack.X_MITRE_PLATFORMS}</td>
            <td>{attack.X_MITRE_DETECTION}</td>
            <td>{attack.PHASE_NAME}</td>
          </tr>
        </tbody>
      ))}
    </table>
  );
}

export default AttacksGrid;

import React, { useState } from "react";

function Navbar({ onSearchClicked }) {
  const [message, setMessage] = useState(""); // 管理输入框的值

  const handleChange = (event) => {
    setMessage(event.target.value);
  };

  return (
    <nav className="navbar bg-body-tertiary">
      <div className="container-fluid">
        <form className="d-flex" role="search">
          <input
            id="message"
            name="message"
            className="form-control me-2"
            type="search"
            placeholder="Search"
            aria-label="Search"
            onChange={handleChange}
            value={message} // 使输入框成为受控组件
          />
          <button
            className="btn btn-outline-success"
            type="submit" // 这是一个提交按钮
            onClick={() => {
              onSearchClicked(message); // 调用父组件的回调
            }}
          >
            Search
          </button>
        </form>
      </div>
    </nav>
  );
}

export default Navbar;

import React, { useState } from "react";

function Navbar({ onSearchClicked }) {
  const [message, setMessage] = useState("");

  const handleChange = (event) => {
    setMessage(event.target.value);
  };

  return (
    <nav className="navbar bg-body-tertiary">
      <div className="container-fluid">
        <form className="d-flex" role="search">
          <input
            id="message"
            name="message"
            className="form-control me-2"
            type="search"
            placeholder="Search"
            aria-label="Search"
            onChange={handleChange}
            value={message}
          />
          <button
            className="btn btn-outline-success"
            type="submit"
            onClick={(e) => { // 传入事件对象 e
              e.preventDefault(); // <-- 关键：阻止默认的表单提交行为
              onSearchClicked(message); // 继续执行我们自定义的搜索逻辑
            }}
          >
            Search
          </button>
        </form>
      </div>
    </nav>
  );
}

export default Navbar;

// 在 Navbar 组件中
import React, { useState } from "react";

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}> {/* 将 onSubmit 绑定到 form 元素 */}
          <input
            id="message"
            name="message"
            className="form-control me-2"
            type="search"
            placeholder="Search"
            aria-label="Search"
            onChange={handleChange}
            value={message}
          />
          <button className="btn btn-outline-success" type="submit"> {/* 按钮只需 type="submit" */}
            Search
          </button>
        </form>
      </div>
    </nav>
  );
}

export default Navbar;