已经创建了一个反应应用程序（使用 npx create-react-app），它在刷新时会崩溃

Question

我创建了一个反应应用程序（通过 npx create-react-app），我正在使用 axios 获取（用户的）api 数据，然后在组件（UsersList.js）上呈现数据，然后单击特定用户导航到 UserHomePage.js（带有用户详细信息）。刷新 UserHome 页面时，应用程序崩溃并显示错误消息（无法读取未定义的属性）。 Main.js 是所有组件的根目录。

gitHub 链接：https://github.com/ajitkrsingh0786/users-profile-react-app Netlify 链接：https://ajit-users-profile-react-app.netlify.app/

我的代码..

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

 
serviceWorker.unregister();

App.js

import React from 'react';
import './App.css';
import Main from './components/Main';
import { HashRouter, useHistory } from 'react-router-dom';
 
 
function App() {
   
  return (
    <HashRouter>
      <div className="App">
        <Main />
      </div>
    </HashRouter>
  );
}

export default App;

Main.js

import React ,{Component} from 'react';
import UsersList from './UsersList';
import UserHomePage from './UserHomePage';
import { Switch, Route, Redirect } from 'react-router-dom';
import Axios from 'axios';


class Main extends  Component{
    constructor(props){
           super(props);
           this.state = {
               users: [],
               
           }
    }


        componentDidMount(){
        Axios.get('https://panorbit.in/api/users.json')            
             .then( res => {
                 console.log(res)
                 this.setState(
                     {
                         
                         users: res.data.users,
                     }
                 )
             })
    }
      
    render(){

        const UserWithId = ({match}) => {
            return(
                <UserHomePage user={this.state.users.filter((user) => user.id === parseInt(match.params.userId,10))[0]} />
            );
          };
     
          
        return (
            <div>
             <Switch>
              <Route path='/userList' component={ () =><UsersList users={this.state.users}/>} />
              <Route exact path='/userHomePage' component={UserHomePage} />
              <Route path='/userHomePage/:userId'  component={UserWithId}/>
              <Redirect to="/userList"/>
          </Switch>
            </div>
        )
    }
}

export default Main;

UsersList.js

import React from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardHeader,
    CardTitle, Container} from 'reactstrap';
    import {Link} from 'react-router-dom';
 
  function UsersList(props){
         console.log("Ajit");
         console.log(props)
          

      return(
               <Container className="users-list-container">
                <div className="col-5">
                <Card className="users-list-card">
                    <CardHeader>
                        <h4>Users List</h4>
                    </CardHeader>
                <CardBody className="card-body" >
                <ul className="users-list">
                    {
                        props.users.map( user => {
                            return(
                            <Link to={`/userHomePage/${user.id}`} key={user.id}>
                            <li key={user.id}>
                               <div className="user-image user-row">
                                   <img src={user.profilepicture} alt="img" className="user- 
                                    image"/>
                                </div>

                                <div className="user-row">
                                     {user.name}
                                </div>
                                
                                </li>
                                </Link>
                            )
                        })
                    }
                </ul>
                </CardBody>
                </Card>
                </div>
                </Container>
      )
  }

  export default UsersList;

UserHomePage.js

import React from 'react';
import { Container } from 'reactstrap';
import { useHistory } from 'react-router-dom';
 
  function UserHomePage( props ){

    const history = useHistory();
  console.log("history");
  console.log(history);
  console.log("history");
      return(
          <div  className="home-page">
              <div className="nav-bar">
                  <ul className="ul-nav-bar">
                    <li className="li-nav-bar"> <h4>Profile</h4> </li>
                    <li className="li-nav-bar"> <h4>Posts</h4>  </li>
                    <li className="li-nav-bar"> <h4>Gallery</h4></li>
                    <li className="li-nav-bar">  <h4>ToDo</h4>  </li>                  
                  </ul>                                      
              </div>
              <div  className="home-page-body">
                  <div className="row-1">
                       <h4 className="row-1">Users Home page</h4>
                         <div className="user-image user-row">
                                   <img src={props.user.profilepicture} alt="img" 
                                     className="user-image"/>
                                </div>

                                <div className="user-row">
                                     {props.user.name}
                        </div>
                  </div>
                  <div className="row-2">
               
               <img src={props.user.profilepicture} alt="user image" />
               </div>
             </div>
          </div>
      )
  }

  export default UserHomePage;

Answer 1

当您登陆第一页 /userlist 时，componentdidmount 中数据的 API 调用会为您提供数据。然后在单击用户列表页面中的特定用户链接时重定向到/userHomePage/:userId 页面。现在因为你在渲染上创建的这个组件的数据已经从组件那里安装了

const UserWithId = ({
    match
}) => {
    return ( <
        UserHomePage user = {
            this.state.users.filter((user) => user.id === parseInt(match.params.userId, 10))[0]
        }
        />
    );
};

但是当您刷新页面 /userHomePage/:userId 时，首先调用 Main.js 的渲染，此时状态为空，因此您在该渲染中的上述定义中使用的过滤器将为您提供未定义的对象。因此，在组件UserHomePage 中，未定义正在创建错误，并且不会调用 componentDidMount 方法。 这个问题的解决方案可能是我在UserHomePage 中使用空检查 所以 UserHomePage 的代码是

import React from 'react';
import { Container } from 'reactstrap';
 
  function UserHomePage( props ){
      return(
          <div  className="home-page">
              <div className="nav-bar">
                  <ul className="ul-nav-bar">
                    <li className="li-nav-bar"><h4>Profile</h4></li>
                    <li className="li-nav-bar"><h4>Posts</h4></li>
                    <li className="li-nav-bar"><h4>Gallery</h4></li>
                    <li className="li-nav-bar"><h4>ToDo</h4></li>                  
                  </ul>                                      
              </div>
              <div  className="home-page-body">
                  <div className="row-1">
                       <h4 className="row-1">Users Home page</h4>
                        <div className="user-image user-row">
                                   <img src={props.user && props.user.profilepicture} alt="img" className="user-image"/>
                                </div>

                                <div className="user-row">
                                     {props.user && props.user.name}
                        </div>
                  </div>
                  <div className="row-2">
               <img src={props.user && props.user.profilepicture} alt="user image" />
               </div>
             </div>
          </div>
      )
  }

  export default UserHomePage;

所以最初它会渲染空数据，然后在 componentDidMount 之后它会打印实际过滤的用户数据