我有一张票证。 当我创建新票证时, 门票图像(路径),描述和价格已正确存储在数据库中
但是users_id和events_id仍为空字段
我希望用户ID成为该新票证的一部分 以及创建票证的事件的event_id。
这是我的 TicketForm
import React, { PureComponent } from "react";
import Paper from "@material-ui/core/Paper";
import "../../App.css";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import { Redirect } from "react-router";
class TicketForm extends PureComponent {
constructor(props) {
super(props);
this.state = {
fireRedirect: false
};
this.handleChange = this.handleChange.bind(this);
}
handleSubmit = e => {
e.preventDefault();
this.props.onSubmit(this.state)
this.setState({ fireRedirect: true })
}
handleChange = ticket => {
const { name, value } = ticket.target;
this.setState({
[name]: value
});
};
render() {
const { fireRedirect } = this.state
return <div>
<Paper className="styles" elevation={4}>
<form onSubmit={this.handleSubmit}>
<div>
<TextField label="Image" name="image" value={this.state.image || ""} onChange={this.handleChange} />
</div>
<div>
<TextField label="Description" name="description" value={this.state.description || ""} onChange={this.handleChange} />
</div>
<div>
<TextField label="Price" name="price" value={this.state.price || ""} onChange={this.handleChange} />
</div>
<br />
<Button type="submit">Add Ticket</Button>
</form>
{fireRedirect && (
<Redirect to={'/events/:id'} />
)}
</Paper>
</div>;
}
}
export default TicketForm;
动作创建者 actions / tickets.js
export const addTicket = ticket => (dispatch, getState) => {
const state = getState();
const jwt = state.currentUser.jwt;
if (isExpired(jwt)) return dispatch(logout());
request
.post(`${baseUrl}/tickets`)
.set("Authorization", `Bearer ${jwt}`)
.send({
image: ticket.image,
description: ticket.description,
price: ticket.price
})
.then(response =>
dispatch({
type: ADD_TICKET,
payload: response.body
})
);
};
应用(父)组件,您将在其中被路由到/ addTicket(CreateTicket)组件,在该组件中,您可以单击以转到TicketForm
<Router>
<div>
<TopBar />
<br/><br/>
<Route exact path="/login" component={LoginPage} />
<Route exact path="/logout" component={LogoutPage} />
<Route exact path="/signup" component={SignupPage} />
<Route exact path="/events" component={EventsList} />
<Route exact path="/createEvent" component={CreateEvent} />
<Route exact path="/events/:id" component={TicketsList} />
<Route exact path="/tickets/:id" component={TicketDetails} />
<Route exact path="/addTicket" component={CreateTicket} />
<Route exact path="/" render={() => <Redirect to="/events" />} />
</div>
</Router>
减少器/票证
import { GET_TICKET,ADD_TICKET } from "../actions/tickets";
const ticket = {};
export default function(state = ticket, action) {
switch (action.type) {
case GET_TICKET:
return action.payload;
case ADD_TICKET:
return action.payload;
default:
return state;
}
}
在后端
我正在创建票证和用户表之间的关系 以及票证与事件之间的关系 tickets / controller.ts
import {
JsonController,
Get,
Param,
Put,
Body,
NotFoundError,
HttpCode,
Post,
Authorized
} from "routing-controllers";
import Ticket from "./entity";
@JsonController()
export default class TicketController {
@Get("/tickets/:id")
getTicket(@Param("id") id: number) {
return Ticket.findOne(id);
}
@Get("/tickets")
async allTickets() {
const tickets = await Ticket.find();
return { tickets };
}
@Authorized()
@Put("/tickets/:id")
async updateTicket(@Param("id") id: number, @Body() update: Partial<Ticket>) {
const ticket = await Ticket.findOne(id);
if (!ticket) throw new NotFoundError("Cannot find ticket");
return Ticket.merge(ticket, update).save();
}
@Authorized()
@Post("/tickets")
@HttpCode(201)
createTicket(@Body() ticket: Ticket) {
return ticket.save();
}
}
门票/entity.ts
@Entity()
export default class Ticket extends BaseEntity {
@PrimaryGeneratedColumn() id?: number;
@IsString()
@Column("text", { nullable: true })
image: string;
@Column("integer", { nullable: true })
price: number;
@IsString()
@Length(0, 100)
@Column("text")
description: string;
@ManyToOne(_ => User, user => user.tickets, {
eager: true,
cascade: true
})
users: User[];
@OneToMany(_ => Comment, comment => comment.tickets, {
eager: false
})
comments: Comment;
@ManyToOne(_ => Event, event => event.tickets, {
eager: true,
cascade: true
})
events: Event[];
}
如果有人可以给我建议或提示去哪里找?