ReactJS：未捕获的类型错误：无法读取未定义的属性“对象”

Question

我正在尝试使用 Laravel 和 ReactJs 构建一个项目。我已经渲染了一个表格并显示了数据。但是当我尝试在 ReactJs 中使用 Router 来构建一个 CRUD 项目时，它出现了错误。有人可以帮我吗，拜托。这是我的代码，谢谢：

我的主页：Example.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import { Link } from "react-router-dom";

export default class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {posts: []};
    }
    componentWillMount(){
        axios.get('http://127.0.0.1:8000/posts')
            .then(response => {
                this.setState({ posts: response.data });
            })
            .catch(function (error) {
                console.log(error);
            })
    }
    postRow(p){
        return (
            <tr key = {p.id}>
                <td>{p.title}</td>
                <td>{p.description}</td>
                <td><a>Edit</a></td>
                <td><a>Delete</a></td>
            </tr>
        )
    }
    render() {
        const posts = this.state.posts.map(post => this.postRow(post));
        return (
            <div>
                <table border="1">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Description</th>
                            <th></th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        { posts }
                    </tbody>
                </table>
                <Link to="/add-post">Add</Link>
                //<Route exact path='/add-post' component={CreatePost}/>
            </div>
        );
    }
}
if (document.getElementById('homepage')) {
    ReactDOM.render(
            <Example />
        , document.getElementById('homepage')
    );
}

RoutePath.js

import React, {Component} from 'react';
import { Route, BrowserRouter } from "react-router-dom";
import CreatePost from './CreatePost';
import Example from './Example';

export default class RoutePath extends Component{
    render(){
        return(
            <BrowserRouter>
                <div>
                        <Route exact path='/' component={Example}/>
                        <Route exact path='/add-post' component={CreatePost}/>
                </div>
            </BrowserRouter>
        )
    }
}

CreatePost.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class CreatePost extends Component{
    constructor(props){
        super(props);
        this.state = {postTitle: '', postDescription: ''};

        this.titleChange = this.titleChange.bind(this);
        this.descriptionChange = this.descriptionChange.bind(this);

        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(e){
        e.preventDefault();
        const post = {
            title: this.state.postTitle,
            description: this.state.postDescription
        }
        let uri = 'http://127.0.0.1:8000/api/add';
        axios.post(uri,post).then((response) => {
            //browserHistory.push('/');
        });
    }
    titleChange(e){
        this.setState({
            postTitle: e.target.value
        })
    }
    descriptionChange(e){
        this.setState({
            postDescription: e.target.value
        })
    }
    render(){
        return(
            <div>
                <form onSubmit={this.handleSubmit} method="POST">
                    <label>Title: </label>
                    <input type="text" onChange={this.titleChange}/>
                    <br/>
                    <label>Description: </label>
                    <textarea onChange={this.descriptionChange}></textarea>
                    <br/>
                    <input type="submit" value="add"/>
                </form>
            </div>
        )
    }
}
export default CreatePost;

PostController.php

class PostController extends Controller
{
    public function index(){
        $post = Post::all();
        return response()->json($post);
    }
    public function store(Request $request){
        $post = new Post();
        $post->title = $request->title;
        $post->description = $request->description;
        $post->save();
        return response()->json('Post Added');
    }
}

Answer 1

在路由路径中：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Switch, Route, BrowserRouter } from 'react-router-dom'; // import BrwoserRouter here
import CreatePost from './CreatePost';
import Example from './Example';

export default class RoutePath extends Component {
  render() {
    return (
      <BrowserRouter> // use it here...
        <Switch>
          <Route exact path="/" component={Example} />
          <Route exact path="/add-post" component={CreatePost} />
        </Switch>
      </BrowserRouter>
    );
  }
}

Answer 2

如果您查看 RoutePath.js，您会发现您的两条路线包含在另一条路线中。您需要将其更改为 BrowserRouter。请参阅文档，https://reacttraining.com/react-router/web/api/Route

这应该解决您的问题。

<Route>
  <div>
    <Switch>
      <Route exact path='/' component={Example}/>
      <Route exact path='/add-post' component={CreatePost}/>
    </Switch>
  </div>
</Route>