Question

我正在尝试渲染组件（AllAssignments.jsx）。该组件包含一个表，该表填充了从MongoDB获取的一些数据，并将使用网址http://localhost:4000/instructor/IT17157124/assignments/update/

进行渲染。

这是一个易于理解的屏幕截图。

screenshot

在屏幕截图中，您将看到Due Date，它们是指向http://localhost:4000/instructor/:username/assignments/update/:assignmentID的可点击链接

例如：-http://localhost:4000/instructor/IT17157124/assignments/update/5d0c118ab059491b50361489

当我单击任何日期链接时，它将呈现另一个组件EditAssignmentDate.jsx，允许用户编辑日期。

此EditAssignmentDate.jsx的网址为http://localhost:4000/instructor/IT17157124/assignments/update/5d0c118ab059491b50361489

为便于理解，以下再次是链接：

AllAssignments.jsx -

http://localhost:4000/instructor/IT17157124/assignments/update/

EditAssignmentDate.jsx -http://localhost:4000/instructor/IT17157124/assignments/update/5d0c118ab059491b50361489

我的问题：当我单击Due Date时，它会渲染相关的组件，但是当我单击navbar item时，它应该指引我并渲染AllAssignments.jsx < strong>仅url更改，但组件不呈现。我仍然可以看到EditAssignmentDate.jsx组件

如果要刷新页面，它将显示组件（AllAssignments.jsx）。

这是我的AllAssignment.jsx

import React, { Component } from "react";
import { Link, BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "react-datepicker/dist/react-datepicker.css";
import axio from "axios";
import EditAssignmentDate from "./instructor-edit-assignment-date";
import AllAssignmentsSubsidory from "./instructor-all-assignment-subsidory";

const ShowAssignments = props => (
  <tr>
    <td>{props.assignment.assignmentName}</td>
    <td>{props.assignment.assignmentDescription}</td>
    <td>{props.assignment.courseName}</td>
    <td>
      <Link
        to={`/instructor/IT17157124/assignments/update/${props.assignment._id}`}
      >
        {props.convertedDate}
      </Link>
    </td>
  </tr>
);

export default class AllAssignments extends Component {
  constructor(props) {
    super(props);

    this.state = {
      assignmentName: "",
      assignmentDescription: "",
      courseName: "",
      assignmentDueDate: "",
      allAssignments: []
    };
  }

  convertDateToString(date) {
    let today = new Date(date);

    let datee =
      parseInt(today.getMonth() + 1) +
      "/" +
      today.getDate() +
      "/" +
      today.getFullYear();

    var dateString = datee; // Oct 23
    return dateString;

    // var dateObject = new Date(dateString);
  }

  componentDidMount() {    
    axio
      .get("http://localhost:4000/courseweb/assignments")
      .then(res => {
        this.setState({
          allAssignments: res.data
        });
      })
      .catch(err => {
        console.log(err);
      });
  }

  getRows() {    
    return this.state.allAssignments.map((currentAssignment, id) => {
      return (
        <ShowAssignments
          assignment={currentAssignment}
          key={id}
          convertedDate={this.convertDateToString(
            currentAssignment.assignmentDueDate
          )}
        />
      );
    });
  }
  render() {
    return (
      <Router>
        <Switch>

          <Route
            exact
            path={`/instructor/IT17157124/assignments/update`}
            render={props => (
              <AllAssignmentsSubsidory
                {...props}
                username={this.props.username}
                getRows={this.getRows()}
              />
            )}
          />

          <Route
            /* path={`/instructor/IT17157124/assignments/update/:assignmentID`} */
            path='/instructor/IT17157124/assignments/update/:assignmentID'
            component={EditAssignmentDate}
          />
        </Switch>
      </Router>
    );
  }
}

这是我的EditAssignmentDate.jsx

import React, { Component } from "react";
import { Link } from "react-router-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import axio from "axios";

export default class EditAssignmentDate extends Component {
  constructor(props) {
    super(props);

    this.state = {
      assignmentDueDate: new Date(),
      assignmentObject: []
    };
    this.handleChange = this.handleChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  handleChange(date) {
    this.setState({
      assignmentDueDate: date
    });
  }

  componentDidMount() {
    console.log("Component did mount");
    axio
      .get(
        "http://localhost:4000/courseweb/assignments/update/" +
          this.props.match.params.assignmentID
      )
      .then(res => {
        let today = new Date(res.data.assignmentDueDate);

        let datee =
          parseInt(today.getMonth() + 1) +
          "/" +
          today.getDate() +
          "/" +
          today.getFullYear();

        var dateString = datee;
        this.setState({
            assignmentDueDate: new Date(dateString)
        });
      })
      .catch(err => {
        console.log(err);
      });
  }

  onSubmit(e) {
    e.preventDefault();
  }

  render() {
    return (
      <div className="container">
        <h1>Edit Assignment Date {this.props.match.params.assignmentID}</h1>
        <br />
        <form>
          <div className="form-group">
            <label>Due Date:</label>{" "}
            <DatePicker
              className="form-control"
              selected={this.state.assignmentDueDate}
              onChange={this.handleChange}
            />
          </div>
        </form>
      </div>
    );
  }
}

有人可以告诉我我哪里出问题了吗？

反应URL更改，但组件无法查看/渲染

0 个答案: