世界上最伟大的投资就是投资自己的教育
https://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
src/components/Records
import React, { Component } from 'react';
import Record from './Record';
import * as RecordsAPI from '../utils/RecordsAPI';
import RecordForm from './RecordForm';
class Records extends Component {
constructor() {
super();
this.state = {
error: null,
isLoaded: false,
records: []
}
}
componentDidMount() {
RecordsAPI.getAll().then(
response => this.setState({
records: response.data,
isLoaded: true
})
).catch(
error => this.setState({
isLoaded: true,
error
})
)
}
addRecord(record) {
this.setState({
error: null,
isLoaded: true,
records: [
...this.state.records,
record
]
})
}
updateRecord(record, data) {
const recordIndex = this.state.records.indexOf(record);
const newRecords = this.state.records.map( (item, index) => {
if(index !== recordIndex) {
// This isn't the item we care about - keep it as-is
return item;
}
// Otherwise, this is the one we want - return an updated value
return {
...item,
...data
};
});
this.setState({
records: newRecords
});
}
deleteRecord(record) {
const recordIndex = this.state.records.indexOf(record);
const newRecords = this.state.records.filter( (item, index) => index !== recordIndex);
this.setState({
records: newRecords
});
}
render() {
const { error, isLoaded, records } = this.state;
let recordsComponent;
if (error) {
recordsComponent = <div>Error: {error.message}</div>;
} else if (!isLoaded) {
recordsComponent = <div>Loading...</div>;
} else {
recordsComponent = (
<table className="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Title</th>
<th>Amount</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{records.map((record) =>
(<Record
key={record.id}
record={record}
handleEditRecord={this.updateRecord.bind(this)}
handleDeleteRecord={this.deleteRecord.bind(this)}
/>)
)}
</tbody>
</table>
);
}
return (
<div>
<h2>Records</h2>
<RecordForm handleNewRecord={this.addRecord.bind(this)} />
{recordsComponent}
</div>
);
}
}
export default Records;
src/components/Record.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import * as RecordsAPI from '../utils/RecordsAPI';
export default class Record extends Component {
constructor() {
super();
this.state = {
edit: false
};
}
handleToggle() {
this.setState({
edit: !this.state.edit
});
}
handleEdit(event) {
event.preventDefault();
const record = {
date: this.refs.date.value,
title: this.refs.title.value,
amount: Number.parseInt(this.refs.amount.value, 0)
}
RecordsAPI.update(this.props.record.id, record).then(
response => {
this.props.handleEditRecord(this.props.record, response.data);
}
).catch(
error => console.log(error.message)
)
}
handleDelete(event) {
event.preventDefault();
RecordsAPI.remove(this.props.record.id).then(
response => this.props.handleDeleteRecord(this.props.record)
).catch(
error => console.log(error.message)
)
}
recordRow() {
return (
<tr>
<td>{this.props.record.date}</td>
<td>{this.props.record.title}</td>
<td>{this.props.record.amount}</td>
<td>
<button className="btn btn-info mr-1" onClick={this.handleToggle.bind(this)}>Edit</button>
<button className="btn btn-danger" onClick={this.handleDelete.bind(this)}>Delete</button>
</td>
</tr>
);
}
recordForm() {
return (
<tr>
<td><input type="text" className="form-control" defaultValue={this.props.record.date} ref="date" /></td>
<td><input type="text" className="form-control" defaultValue={this.props.record.title} ref="title" /></td>
<td><input type="text" className="form-control" defaultValue={this.props.record.amount} ref="amount" /></td>
<td>
<button className="btn btn-info mr-1" onClick={this.handleEdit.bind(this)}>Update</button>
<button className="btn btn-danger" onClick={this.handleToggle.bind(this)}>Cancel</button>
</td>
</tr>
);
}
render() {
if (this.state.edit) {
return this.recordForm();
} else {
return this.recordRow();
}
}
}
Record.propTypes = {
record: PropTypes.object
}
04:121FreeReact 基础实践篇免费视频教程 - 小型财务系统 #1 简介
12:262FreeReact 基础实践篇免费视频教程 - 小型财务系统 #2 实现 records 列表页
15:323FreeReact 基础实践篇免费视频教程 - 小型财务系统 #3 前端模拟 API 数据的两种方式
16:114FreeReact 基础实践篇免费视频教程 - 小型财务系统 #4 使用 jQuery 或 axios 请求 API 数据
12:305FreeReact 基础实践篇免费视频教程 - 小型财务系统 #5 静态类型检查和改造 API url
15:126FreeReact 基础实践篇免费视频教程 - 小型财务系统 #6 创建表单
17:327FreeReact 基础实践篇免费视频教程 - 小型财务系统 #7 发送 API 请求创建 Record
20:418FreeReact 基础实践篇免费视频教程 - 小型财务系统 #8 更新 Record
06:12FreeReact 基础实践篇免费视频教程 - 小型财务系统 #9 删除 Record
09:2910FreeReact 基础实践篇免费视频教程 - 小型财务系统 #10 统计金额(完结)
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 创业者社区 | Rails365 Gitlab | Qiuzhi99 Gitlab | Railstart 创业项目 | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号
子组件

父组件
老师,你好,在删除操作的时候,掉接口数据传给父级组件的时候,为什么不用接口返回的数据?而是用父级的数据
其实是一样的,不过我们都有强迫症,调取接口返回的数据一定要用上,否则心里不踏实,哈哈(个人见解,不对勿喷)
父组件传过来的数据 和 接口返回的数据是一样的 但是在 filter 过滤的时候 ,不能用。这点不太明白 明明数据是一样的
删除数据的时候,可能服务器就返应一个 200 状态码,告诉你删除成功了,响应内容可能就为空,你能知道是删除了哪一条吗?
明白你说的意思了,谢谢
有一个问题 mock api 不能删除里面的值么?
返回都是 200 了
大家请检查 发送 method 那块是否是 delete QAQ 粗心 ,问题解决
按老师的方法,实现真正的删除,如果大家发现不能删除成功和更新,一定要多仔细的多看几次,只到会和实现,再看下一节。这样才能学到老师讲的技术点,这只是我个人的观点。
老师 如果说想实现 antd 的 table 的分页显示该怎么弄啊
看一下 antd v2 的课程有的