React Router：第一次访问 ParentNotificationsPage 组件时不显示数据，仅在返回后才显示

Question

我在 React 应用程序中遇到了 React Router 的问题，其中 ParentNotificationsPage 组件在第一次访问时不显示数据。仅当我导航回该组件时，数据才会出现。这是我的设置的细分：

问题： 我有一个使用 React Router 的 React 应用程序，在 ParentNotificationsPage 组件中，我获取数据并将其呈现在列表中。数据获取发生在初始渲染的 useEffect 挂钩中。但是，在第一次访问该组件时，页面是空的，并且仅当我导航离开然后返回到该组件时才会出现数据。

代码： 这是我的代码的相关部分：

ParentNotificationPage.js：

import React, { useEffect, useState } from 'react';
import getNotifications from '../services/GetNotifications';
import { Link } from 'react-router-dom';

const ParentNotificationsPage = () => {
    const [notifications, setNotifications] = useState([]);

    useEffect(() => {
        fetchNotifications();
    }, []);

    const fetchNotifications = () => {
        getNotifications()
            .then((data) => {
                setNotifications(data);
            })
            .catch((error) => {
                console.error('Error fetching notifications:', error);
            });
    };

    return (
        <div>
            <h2>Notifications for Parent User</h2>
            <ul>
                {notifications.map((notification) => (
                    <li key={notification.id}>
                        {notification.message}
                    </li>
                ))}
            </ul>
            <Link to="/addNotifications">
                <button>Add Notification</button>
            </Link>
        </div>
    );
};

export default ParentNotificationsPage;

应用程序.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import AuthPage from './pages/AuthPage';
import ParentNotificationsPage from './components/ParentPage';
import AddNotificationForm from './services/AddNotifications';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={AuthPage} />
        <Route
          path="/ParentPage"
          render={(props) => (
            <ParentNotificationsPage {...props} />
          )}
        />
        <Route
          path="/addNotifications"
          component={AddNotificationForm}
        />
      </Switch>
    </Router>
  );
};

export default App;

我尝试过的： 1.在渲染ParentNotificationsPage组件之前检查数据是否正确获取。 2. 验证 useEffect 钩子是否在初始渲染时触发。 3. 确认数据处于初始提取后的状态。 预期行为： 我希望 ParentNotificationsPage 组件在第一次访问时显示数据，而无需导航离开并返回。

问题： 是什么原因导致第一次访问 ParentNotificationsPage 组件时不显示数据？如何确保进入页面后立即显示数据？

Answer 1

我有几个问题。

您确定浏览器的开发者工具控制台没有任何错误吗？

您是直接访问 http://localhost:3000/addNotifications 还是从 http://localhost:3000 导航？