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

【问题标题】：Solving problem of component failing to rerender after refresh解决组件刷新后无法重新渲染的问题
【发布时间】：2020-03-07 19:17:22
【问题描述】：

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

这里是 Github 上的项目链接：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 组件的呈现方式。在阅读了人们的 cmets 之后，似乎在刷新时，我丢失了 state.account.id，这导致我在 App.js 中丢失了 dynamicRoute，这导致 Dashboard 组件无法呈现。任何人都可以看到此问题的解决方案：

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

【问题讨论】：

您是否也遇到任何错误？
是的，因为当您刷新页面时，redux 状态消失了。刷新页面时可能需要使用 redux-persist github.com/rt2zz/redux-persist 来保存现有状态。
@MuhammadHaseeb 没有错误，只是一个空白页。
@Tazoleladze 嗯，不过我很困惑。如果只有依赖于 redux 状态的元素没有渲染，那对我来说会更有意义。但是，我什么也没得到，甚至没有只呈现“这是仪表板组件”的 h1 标记。那不会依赖于 redux 状态，对吧？
@DrewReese Dashboard 正在从 App.js 中的路由呈现。检查我刚刚对原始帖子所做的代码编辑。

标签： reactjs redux use-effect

【解决方案1】：

有几种方法可以解决这个问题。其中之一是有一个操作，该操作将进行 API 调用以检索仪表板组件所需的信息，并在 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')
);

【讨论】：