0

我是 React 的初学者并尝试使用 React.lazy 但失败了，并且在控制台中没有显示任何错误。请帮忙

import React, {Suspense } from "react";
import { Route, NavLink, Switch, Redirect } from "react-router-dom";
//import NewPost from "../../Components/NewPost/NewPost";
import HomePage from "../../Components/HomePage/HomePage";
import ErrorPage from "../404/404";
import style from "./Header.module.css"

const newpost = React.lazy(() => import("../../Components/NewPost/NewPost"))

class Header extends React.Component {
    render(){
        console.log("newPost", <newpost/>)
        return (
            <React.Fragment>
                <div className={style.navCont}>
                    <ul>
                        <li>
                            <NavLink activeClassName={style.acive} to="/posts">Home</NavLink>
                        </li>
                        <li>
                            <NavLink activeClassName={style.acive} to="/new-post">New Posts</NavLink>
                        </li>
                    </ul>
                </div>
    
                <Switch>
                    {/* <Route path="/new-post" render={() => { <div>Post</div>}} /> */}
                    <Route path="/new-post" render={() => {
                        <Suspense fallback={<div>Loading...</div>}>
                            <newpost/>
                        </Suspense>
                    }} />
                    {/* <Route path="/new-post" component={NewPost} /> */}
                    <Route path="/posts" component={HomePage} />
                    {/* <Redirect from="/" to="/posts"/> */}
                    <Route component={ErrorPage} />
                </Switch>
            </React.Fragment>
        )
    }
}

export default Header;

NewPost.js

import axios from "axios";
import React from "react";
import { withRouter } from 'react-router-dom';
import style from "./NewPost.module.css"

class NewPost extends React.Component {
    constructor(){
        super();
        this.state = {
            title : "",
            content : "",
            author : "",
        }
    }

    postDataHandler = () => {
        const post =  {
            title : this.state.title,
            body : this.state.content,
            author : this.state.author
        }

        axios.post("https://jsonplaceholder.typicode.com/posts", post)
        .then(res => {
            console.log(res.data)
        })
    }

    render () {
        return (
            <div className={style.box}>
                <h1>Add Post</h1>
                <p>Title</p>
                <input type="text" value={this.state.title} onChange={(e) => this.setState({title : e.target.value})}/>
                <p>content</p>
                <textarea value={this.state.content} onChange={(e) => this.setState({content : e.target.value})}/>
                <p>Author</p>
                <select value={this.state.author} onChange={(e) => this.setState({author : e.target.value})}>
                    <option>Select</option>
                    <option>Sunny</option>
                    <option>john</option>
                </select>
                <button onClick={() => this.postDataHandler()}>Add Post</button>
            </div>
        );
    }
}

export default withRouter(NewPost);
4

0 回答 0