组件参数未更新导致数据未刷新：React应用中数据请求的正确姿势-js教程-PHP中文网

组件参数未更新导致数据未刷新：React应用中数据请求的正确姿势

聖光之護

发布： 2025-10-08 11:05:01

原创

160人浏览过

组件参数未更新导致数据未刷新：react应用中数据请求的正确姿势

在React应用开发中，经常会遇到组件接收到新的参数后，本应重新获取数据并更新UI，但实际却没有发生的情况。本文将通过一个具体的例子，分析这种问题的原因并提供解决方案。正如摘要中所述，问题的核心在于表单提交导致的页面刷新。

问题分析：表单提交与页面刷新

在提供的代码中，Navbar 组件包含一个表单，当用户点击 "Search" 按钮时，会触发 onSearchClicked 函数，进而更新 App 组件中的 query 状态。AttacksGrid 组件接收 query 作为 props，并在 useEffect 中监听 query 的变化，从而发起新的数据请求。

然而，问题在于 <button type="submit"> 的默认行为是提交表单并刷新页面。每次点击 "Search" 按钮，页面都会刷新，导致 App 组件重新渲染，query 状态被重置为空字符串，从而导致 AttacksGrid 组件总是使用空字符串作为查询参数。

解决方案：阻止表单默认行为

解决这个问题的关键在于阻止表单的默认提交行为。可以通过在 onClick 事件处理函数中使用 e.preventDefault() 来实现。

function Navbar({ onSearchClicked }) {
  const [message, setMessage] = useState("");
  const handleChange = (event) => {
    setMessage(event.target.value);
    console.log(message);
  };
  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}
          />
          <button
            className="btn btn-outline-success"
            type="submit"
            onClick={(e) => {
              e.preventDefault(); // 阻止表单默认提交行为
              onSearchClicked(message);
            }}
          >
            Search
          </button>
        </form>
      </div>
    </nav>
  );
}

登录后复制

通过添加 e.preventDefault()，我们阻止了表单的默认提交行为，避免了页面刷新。现在，点击 "Search" 按钮只会触发 onSearchClicked 函数，更新 query 状态，AttacksGrid 组件也会正确地接收到新的 query 值，并从后端获取相应的数据。

无阶未来模型擂台/AI 应用平台

无阶未来模型擂台/AI 应用平台，一站式模型+应用平台

查看详情

进一步优化：useEffect 依赖项

虽然 e.preventDefault() 解决了页面刷新的问题，但仍然需要注意 useEffect 的依赖项。在 AttacksGrid 组件中，useEffect 的依赖项是 [query]，这意味着只有当 query 的值发生变化时，才会重新执行 useEffect 中的代码。

function AttacksGrid({ query }) {
  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]);

  const [attacks, setAttacks] = useState([]);

  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.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>
    </>
  );
}

登录后复制

确保 useEffect 的依赖项包含了所有需要在 effect 中使用的状态或 props。如果遗漏了依赖项，可能会导致 effect 中的代码使用过时的值，从而产生意想不到的结果。

总结

解决React组件参数更新后数据未刷新的问题，需要仔细分析问题的根本原因。在本例中，表单提交导致的页面刷新是罪魁祸首。通过 e.preventDefault() 阻止表单的默认行为，并正确设置 useEffect 的依赖项，可以确保组件在接收到新的参数时能够正确地从后端获取并展示数据。在实际开发中，要养成良好的习惯，仔细检查表单提交行为和 useEffect 的依赖项，避免类似问题的发生。

以上就是组件参数未更新导致数据未刷新：React应用中数据请求的正确姿势的详细内容，更多请关注php中文网其它相关文章！