当用户访问未分派操作的页面时，反应应用程序崩溃

Posted 2023-02-19

【中文标题】当用户访问未分派操作的页面时，反应应用程序崩溃

【英文标题】：React app crashing when user access page where the actions were not dispatched

【发布时间】：2021-12-09 22:21:58

【问题描述】：

我开始使用 REACT - HOOK - REDUX 和 REACT ROUTER 创建我的第一个应用程序。 目前，该应用程序只有在用户进入主页时才能正常运行，该主页不使用任何反应状态（它是一个带有欢迎的静态页面）。如果用户使用其他链接，应用程序将崩溃，因为 redux 状态中没有数据。 我该如何处理这种情况？我想显示一个按钮来执行刷新。

让我给你看看当前的代码：

App.js

import './styles.css';
import React, useState, useEffect from "react";
import "semantic-ui-css/semantic.min.css";
import  Header  from 'semantic-ui-react'
import BurgerSidebar from './components/sidebar/BurgerSidebar';
import  useDispatch, useSelector  from "react-redux";
import  requestData  from "./components/redux/actions"; 
import LoadingOverlay from 'react-loading-overlay';



function App() 

  const dispatch = useDispatch();
  
  const DataReducer = useSelector((state) => state.data);


  const dataLoadingStatus = DataReducer.isLoading;


  const [refresh, setRefresh] = useState(0);

  useEffect(() => 
    

    dispatch(requestData());


   , [refresh]);


  return (

<div id="App"> 

<LoadingOverlay
  active=dataLoadingStatus
  spinner
  text='Loading your content...'
  >


  <div className="ui  inverted segment">
    <Header as='h1' textAlign='center'>
      <Header.Content>
       Data Dashboard
      </Header.Content>
    </Header>

  </div>
  
  <BurgerSidebar  />

</LoadingOverlay>
</div>

  );



export default App;

那么这是一个组件示例，路由器可以从主页重定向，用户可以直接访问。 Dashboard.js

示例

import React from 'react'
import  Header, Container, Segment, Icon, Divider, Card, Grid, Statistic  from 'semantic-ui-react'
import   useSelector  from "react-redux";


const Dashboard = () => 







   const DataReducer = useSelector((state) => state.data);

   const customData = DataReducer.data;
   const totalusers = customData.users.length;

return(


  <main id="page-wrap">
    <Container text>
    <Header as='h2'>Dashboard</Header>
    <Segment>

    <Divider horizontal>
       <Header as='h4'>
          <Icon name='chart bar' />
              Statistics
        </Header>
    </Divider>

      <Grid columns=1 relaxed='very'>
        <Grid.Column>
        <Card fluid>
          <Card.Content>
          <Card.Header>Total Users</Card.Header>

          <Statistic>
          <Statistic.Value>totalusers</Statistic.Value>
          <Statistic.Label>Users of the system</Statistic.Label>
          </Statistic>
          


          </Card.Content>
          </Card>     
        </Grid.Column>
        
        
    </Grid>

</Segment>
    </Container>

  </main>


);




export default Dashboard

因此，我们的想法是检查 state.data 是否为空，但不幸的是似乎不起作用。 有什么建议吗？

谢谢 西蒙

【参考方案1】：

有两种方法可以解决这个问题。 您可以在创建商店时初始化您的状态。 https://redux.js.org/usage/structuring-reducers/initializing-state

或者您的组件应该以可以处理未定义或空状态变量的方式编写

【讨论】：

谢谢！我在检查状态时出错，认为它是“未定义”，但它是一个空数组。现在设置条件 if [[ data.length === 0 ]] 一切正常。