React 组件参数未更新导致数据未刷新问题排查及解决-js教程-PHP中文网

React 组件参数未更新导致数据未刷新问题排查及解决

聖光之護

发布： 2025-10-09 12:04:01

原创

526人浏览过

react 组件参数未更新导致数据未刷新问题排查及解决

本文旨在解决 React 应用中，父组件向子组件传递参数，但子组件未能根据参数变化及时更新数据的问题。通常表现为，父组件状态更新后，子组件接收到的参数值没有改变，导致从后端获取的数据始终保持不变。我们将通过一个实际案例，分析问题原因并提供解决方案，确保组件数据能够正确响应参数变化。

问题分析

在 React 应用中，父组件通过 props 向子组件传递数据。当父组件的状态发生变化时，React 会重新渲染父组件及其子组件。然而，如果子组件未能正确地处理新的 props，就可能导致数据没有及时更新。常见的错误包括：

表单提交导致页面刷新： 表单的默认行为是提交后刷新页面，这会导致整个 React 应用重新加载，状态丢失。
useEffect 依赖项缺失或不正确： useEffect 钩子用于在组件渲染后执行副作用操作，如数据请求。如果依赖项设置不正确，useEffect 可能不会在 props 变化时重新执行。

解决方案

针对上述问题，我们可以采取以下措施：

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

当点击表单的 submit 按钮时，浏览器会默认刷新页面。为了阻止这种行为，我们需要在 onClick 事件处理函数中调用 event.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()，我们阻止了表单的默认提交行为，避免了页面刷新，从而保持了 React 应用的状态。

2. 确保 useEffect 依赖项正确

在 AttacksGrid 组件中，useEffect 钩子负责从后端获取数据。为了确保在 query props 变化时能够重新获取数据，需要将 query 添加到 useEffect 的依赖项数组中。

新CG儿

数字视觉分享平台 | AE模板_视频素材

147

查看详情

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

登录后复制

通过将 query 添加到依赖项数组中，useEffect 会在 query 的值发生变化时重新执行，从而确保 AttacksGrid 组件能够根据新的查询条件从后端获取数据。