解决组件刷新后无法重新渲染的问题

Question

我有一个 Dashboard 组件，它从 reducer 接收状态，然后根据状态为用户呈现帐户信息。该组件在第一次渲染时渲染得很好。但是，当我刷新页面时，一切都消失了，没有任何渲染。我认为这可能是我的 useEffect 钩子的问题，并且可以通过在依赖项数组中放置一些值来解决这个问题。但是，我意识到即使问题出在那个问题上，不依赖于 useEffect 挂钩的组件 JSX 元素部分仍应呈现。甚至没有发生这种情况，我在刷新时一无所获。我该如何解决？

这是Github上的项目link：https://github.com/jevoncochran/Food-Truck-TrackR

这是组件：

const Dashboard = props => {
    const [accountInfo, setAccountInfo] = useState({});

    useEffect(() => {
            axiosWithAuth()
                .get(`/operator/${props.id}`)
                .then(res => {
                    // console.log(res);
                    setAccountInfo(res.data);
                })
                .catch(err => console.log(err))
    }, [props.id])

    return (
        <div>
            <h1>This is the Dashboard component</h1>
            <h2>Welcome, {accountInfo.username}</h2>
            <h3>Your Trucks</h3>
            {accountInfo.trucks && accountInfo.trucks.map(truck => (
                <div key={truck.id}>
                    <p>{truck.name}</p>
                    <p>{truck.cuisine_type}</p>
                    <p>{truck.physical_address}</p>
                    <br/>
                </div>
            ))}
        </div>
    )
}

const mapStateToProps = state => {
    return {
        id: state.account.id,
        username: state.account.username,
        email: state.account.email
    }
}

export default connect(mapStateToProps, {})(Dashboard);

编辑：这就是 Dashboard 组件的呈现方式。在阅读了人们的评论后，似乎在刷新时，我丢失了 state.account.id，这导致我丢失了 App.js 中的 dynamicRoute，这导致仪表板组件无法呈现。任何人看到这个问题的解决方案：

function App(props) {
  console.log(props);
  const dynamicRoute = `/api/vendor/${props.accountId}`

  return (
    <Router>
      <div className="App">
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
        <PrivateRoute path={dynamicRoute} component={Dashboard} />
      </div>
    </Router>
  );
}

Answer 1

有几种方法可以解决这个问题。其中之一是执行一项操作，该操作会进行 API 调用以检索我需要的 Dashboard 组件信息，并且运行如果 redux 状态返回未定义，则执行该操作，这就是发生的情况在刷新。还有 redux-persist。我最终使用 redux-persist 来解决这个问题，可以在此处找到相关文档：https://github.com/rt2zz/redux-persist。这是来自 index.js 的代码：

相关导入：

import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { PersistGate } from "redux-persist/integration/react";

// set up to persist redux state on refresh
const persistConfig = {
    key: 'root',
    storage
};

const persistedReducer = persistReducer(persistConfig, truckReducer);

// async middleware (thunk) and logger has to go here
let store = createStore(persistedReducer, applyMiddleware(thunk, logger));

let persistor = persistStore(store);

ReactDOM.render(
    <Provider store={store}>
        {/* wrap component in PersistGate for redux persist to take effect */}
        <PersistGate loading={null} persistor={persistor}>
            <Router>
                <App />
            </Router>
        </PersistGate>
    </Provider>, 
    document.getElementById('root')
);

解决组件刷新后无法重新渲染的问题

Solving problem of component failing to rerender after refresh

reactjs

redux

use-effect