Question

我创建了一个react应用（通过npx create-react-app），我正在使用axios来获取（用户的）api数据，然后将数据呈现在component（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

当您到达第一页{{1}}时，componentdidmount中数据的API调用将为您提供数据。然后，当您单击用户列表页面中的特定用户链接时，您将重定向到/userlist页面。现在，因为您在渲染器上创建的该组件的数据已经从组件中挂载了

/userHomePage/:userId

但是当刷新页面const UserWithId = ({ match }) => { return ( < UserHomePage user = { this.state.users.filter((user) => user.id === parseInt(match.params.userId, 10))[0] } /> ); };时，将首先调用Main.js的渲染，当状态为空时，因此您在该渲染中的上述定义中使用的过滤器将为您提供未定义的对象。因此，在组件/userHomePage/:userId中，未定义正在创建错误，并且不会调用componentDidMount方法。我可能在UserHomePage中使用空检查来解决此问题所以UserHomePage的代码将是

UserHomePage

这样一来，它将首先呈现空数据，然后在componentDidMount之后将打印实际的过滤用户数据

创建了一个React应用（使用npx create-react-app），刷新时崩溃

1 个答案: