Question

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

我的主页：Example.js

---
kind: Service
apiVersion: v1
metadata:
  name: my-service
spec:
  selector:
    app: MyApp
  ports:
  - protocol: TCP
    port: 80
---
kind: Endpoints
apiVersion: v1
metadata:
  name: my-service
  annotations:
    transition: legacy
subsets:
- addresses:
  - ip: 1.2.3.4
  ports:
  - port: 9376
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: service-discovery-backend
  labels:
    app: MyApp
spec:
  replicas: 1
  selector:
    matchLabels:
      app: MyApp
  template:
    metadata:
      labels:
        app: MyApp
    spec:
      containers:
      - name: nginx
        image: nginx:1.7.9
        ports:
        - containerPort: 80

RoutePath.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')
    );
}

CreatePost.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>
        )
    }
}

PostController.php

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;

Answer 1

在routePath中：

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>

ReactJS：未捕获的TypeError：无法读取未定义的属性“对象”

2 个答案: