javascript - 反应 url 更改,但组件不查看/渲染
问题描述
我正在尝试渲染一个组件 ( AllAssignments.jsx
)。该组件包含一个表格,该表格填充了一些从中获取的数据,MongoDB
并将使用 url 呈现http://localhost:4000/instructor/IT17157124/assignments/update/
这是一个屏幕截图,便于理解。
在屏幕截图中,您将看到Due Date
哪些是指向http://localhost:4000/instructor/:username/assignments/update/:assignmentID
例如:-http://localhost:4000/instructor/IT17157124/assignments/update/5d0c118ab059491b50361489
当我单击任何日期链接时,它会呈现另一个EditAssignmentDate.jsx
允许用户编辑日期的组件。
这EditAssignmentDate.jsx
将使用 url 呈现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
我的问题:当我单击 a 时Due Date
,它会呈现相关组件,但是当我单击navbar item
应该引导我并AllAssignments.jsx
仅呈现 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>
);
}
}
有人可以告诉我哪里出错了吗?
解决方案
推荐阅读
- mysql - MySQL 在 JSON 对象数组中搜索
- c# - 从汇编资源流式传输的音频快速、响亮且失真
- azure - MS Teams 集成和 Microsoft Graph API - 调用事件 API 列表日历时出错 (/me/calendars)
- ios - 使用 SwiftUI 在视图中使用不同的拖动手势
- macos - 如何启用和调试 macOS 文件提供程序扩展?
- c# - 用于 USB 设备的 Winusb 驱动器
- kotlin - 如何在 Jetpack Compose Desktop 中加载字体?
- python-3.x - 'DatetimeIndex' 对象没有属性 'Date'
- javascript - Javascript“无法读取 null 的样式属性”。没有任何工作
- android-intent - 从 SPA Web 应用程序调用 android 意图(以编程方式)