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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-08

浏览次数：次

返回列表

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

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

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

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

然而，问题在于

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

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

function N*bar({ onSearchClicked }) {
  const [message, setMessage] = useState("");
  const handleChange = (event) => {
    setMessage(event.target.value);
    console.log(message);
  };
  return (
    <n* className="n*bar 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>
    </n*>
  );
}

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

青泥AI

青泥学术AI写作辅助平台

360 查看详情青泥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应用中数据请求的正确姿势的详细内容，更多请关注其它相关文章！

# js # react # 服务端 # 自定义 # 到新 # 表单 # 表单提交 # 应用开发 # ai # 后端 # app # json # 百姓网站在百度推广 # 制造业SEO软件 # 潼南网站优化推广 # 口碑营销推广找谁好 # 本溪网站建设公司电话 # 大足贸易网站建设 # 南京seo优化收费标准 # 网站推广必备知识点图片 # 为什么做企业网站推广 # UG学习网站建设 # 也会 # 加载 # 有何不同 # 如何实现 # 正确地

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：提升可访问性：使用 ARIA switch 角色实现可点击容器状态切换

下一篇：使用 jQuery :nth-child() 选择器精准定位特定类别的子元素

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

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

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

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

进一步优化：useEffect 依赖项

总结