世界上最伟大的投资就是投资自己的教育
全场限时 5 折
所有回复
2019-09-18
2019-09-16
-
对 studytm · 金仙 回复
为什么最新的 ant pro 把 localstorage 清空了,localhost/ 还是能直接进主页而不跳转到登录页面
继续往下看呀
18:54 -
为什么最新的 ant pro 把 localstorage 清空了,localhost/ 还是能直接进主页而不跳转到登录页面
18:41 -
对 随风 · 练气 回复
可以 用 dispatch ,redux 的课程里有讲
好的 我到时候看下 谢谢老师
17:23 -
对 Tracy · 合体 回复
<button onClick = {() => {dispatch({type:'counter/add'})}}>+</button><br/> <button onClick = {() => {dispatch({type:'counter/addAsync'})}}>addAsync+</button> <br/> <button onClick = {() => {counterAdd()} }>+</button><br/> <button onClick = {() => {counterAddAsync()}}>addAsync+</button> const mapStateToProps = (state) => { return { counter: state.counter } }
const mapDisptachToProps={
counterAdd:counterAdd,
counterAddAsync:counterAddAsync
}
export default connect(mapStateToProps,mapDisptachToProps)(CounterPage);
老师 我想问下 如果在 connect 里传了 mapDisptachToProps,那么点击的时候
上面的一组 button 会挂掉 ;
如果在 connect 里不传 mapDisptachToProps,那么点击的时候
下面的一组 button 会挂掉
请问这个问题该怎么解决可以 用 dispatch ,redux 的课程里有讲
17:09 -
<button onClick = {() => {dispatch({type:'counter/add'})}}>+</button><br/> <button onClick = {() => {dispatch({type:'counter/addAsync'})}}>addAsync+</button> <br/> <button onClick = {() => {counterAdd()} }>+</button><br/> <button onClick = {() => {counterAddAsync()}}>addAsync+</button> const mapStateToProps = (state) => { return { counter: state.counter } }
const mapDisptachToProps={
counterAdd:counterAdd,
counterAddAsync:counterAddAsync
}
export default connect(mapStateToProps,mapDisptachToProps)(CounterPage);
老师 我想问下 如果在 connect 里传了 mapDisptachToProps,那么点击的时候
上面的一组 button 会挂掉 ;
如果在 connect 里不传 mapDisptachToProps,那么点击的时候
下面的一组 button 会挂掉
请问这个问题该怎么解决15:13
2019-09-15
-
这里能不能像 redux 里用 promise 那样? 省去自己写 action
17:27 -
对 JesusCracker · 太乙 回复
老师,'redux-saga' 里面没有 delay 方法
可能是改了
import { put, delay } from 'redux-saga/effects'
15:49 -
老师,'redux-saga' 里面没有 delay 方法
14:50
2019-09-12
-
对 Tracy · 合体 回复
老师 怎么变得和你一样牛呢?写代码超快的 而且水平超高的
多写几年就会了呀
18:18 -
对 Thever · 合体 回复
"i18n-remove": "pro i18n-remove --locale=zh-CN --write"
构建 antd-pro 用的 npm 搭建的,使用 npm i18n-remove 会提示 command not found,后面用的 yarn 命令执行
的要多加一个 run 吧
18:17 -
"i18n-remove": "pro i18n-remove --locale=zh-CN --write"
构建 antd-pro 用的 npm 搭建的,使用 npm i18n-remove 会提示 command not found,后面用的 yarn 命令执行
的15:12
2019-09-11
2019-09-10
2019-09-09
2019-09-08
-
getArray 中如果传入的是多种类型的,T 就会变成多种类型的联合类型
18:03 -
对 kongcheng · 练虚 回复
let svc: GithubApiService = new GithubApiService();
这一行代码,let svc: GithubApiService 这样写是啥意思?GithubApiService 又不是数据类型,也不是个接口,你怎么可以给 svc 定义成 GithubApiService 类型啊?GithubApiService 只是你写的一个 clas 类啊10:12
2019-09-07
-
let svc: GithubApiService = new GithubApiService();
这一行代码,let svc: GithubApiService 这样写是啥意思?GithubApiService 又不是数据类型,也不是个接口,你怎么可以给 svc 定义成 GithubApiService 类型啊?GithubApiService 只是你写的一个 clas 类啊23:50 -
对 React-小白 · 金丹 回复
大佬!视频中使用的插件的网址能不能贴出来。
https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc?hl=zh-CN
20:04 -
对 React-小白 · 金丹 回复
大佬!视频中使用的插件的网址能不能贴出来。
20:01 -
按老师的方法,实现真正的删除,如果大家发现不能删除成功和更新,一定要多仔细的多看几次,只到会和实现,再看下一节。这样才能学到老师讲的技术点,这只是我个人的观点。
// 接口 src\utils\RecordsAPI.js import axios from "axios"; // 环境 const api = process.env.REACT_APP_RECORDS_API_URL || "http://5d712b7ad3448a001411b5c2.mockapi.io"; // 查询 export const getAll = () => axios.get(`${api}/api/v1/recores`); // 增加 export const create = (body) => axios.post(`${api}/api/v1/recores`, body); // 更新 export const update = (id,body) => axios.post(`${api}/api/v1/recores/${id}`, body); // 删除 export const remove = (id) => axios.delete(`${api}/api/v1/recores/${id}`); // .env.development.local REACT_APP_RECORDS_API_URL=http://5d712b7ad3448a001411b5c2.mockapi.io //src\index.js // src\components\Records\index.js import React, {Component} from 'react'; // import { getJSON } from 'jquery'; // import axios from 'axios'; import Record from '../Record'; import RecordForm from '../RecordForm'; import * as RecordsAPI from '../../utils/RecordsAPI'; class Records extends Component { state = { error: null, isLoaded: false, recores: [] } componentDidMount() { // 使用 jquery /*getJSON('http://5d712b7ad3448a001411b5c2.mockapi.io/api/v1/recores').then((response) => { return this.setState({ recores:response, isLoaded: true, }); }, error => { this.setState({ isLoaded: true, error: error.responseText, }); });*/ // 使用 axios /*axios.get('http://5d712b7ad3448a001411b5c2.mockapi.io/api/v1/recores').then((response) => { return this.setState({ recores:response.data, isLoaded: true, }); }).catch(error => { this.setState({ isLoaded: true, error: error.message, }); });*/ this.handleRecordsAPI(); } handleRecordsAPI = () => { RecordsAPI.getAll().then((response) => { return this.setState({ recores: response.data, isLoaded: true, }); }).catch(error => { this.setState({ isLoaded: true, error: error.message, }); }); }; addRecord = (record) => { console.log(record); // this.handleRecordsAPI(); this.setState({ error: null, isLoaded: true, recores: [ ...this.state.recores, record ] }) } // 更新当前的编辑值 handleEditRecord = (record, data) => { console.log("record",record); /* const a = {a: 'b'}; const b = {a: 'c'}; const c = { ...a, // 旧的值 ...b, // 新的值 }; console.log('c',c); // 返回过来的值 c {a: "c"} */ // 当前的位置 const recordInex = this.state.recores.indexOf(record); const newRecords = this.state.recores.map((item, index) => { if(index !== recordInex){ return item; } return { ...item, ...data } }); this.setState({ recores: newRecords, }); } // 删除 handleDeleteRecord = (record) => { // 当前的位置 const recordInex = this.state.recores.indexOf(record); // 移出一个元素 const newRecords = this.state.recores.filter((item, index) => index !== recordInex); this.setState({ }); this.setState({ recores: newRecords, }); console.log("删除", record); } render() { const {error, isLoaded, recores} = this.state; let recordsComponents; // 处理加载中.... if (error) { recordsComponents = <div>Error: {error}</div> } else if (!isLoaded) { recordsComponents = <div>Loading...</div> } else { recordsComponents = ( <table className="table table-bordered"> <thead> <tr> <th>Date</th> <th>Title</th> <th>Amount</th> <th>Actions</th> </tr> </thead> <tbody> { recores.map((record) => { return ( <Record key={record.id} record={record} handleEditRecord={this.handleEditRecord} handleDeleteRecord={this.handleDeleteRecord} /> ); }) } </tbody> </table> ); } return ( <div> <h2>Record</h2> <RecordForm handleRecordsAPI={this.handleRecordsAPI} handleNewRecord={this.addRecord} /> { recordsComponents } </div> ); } } export default Records; // src\components\RecordForm\index.js import React, {Component} from 'react'; import * as RecoresAPI from '../../utils/RecordsAPI'; class RecordForm extends Component { state = { date: '', title: '', amount: '', } valid = () => { const {date, title, amount} = this.state; // 判断3个同时有值才可以点的 return date && title && amount; } handleChange = (e) => { let name, obj; name = e.target.name; console.log(e.target.name); // 取name的值 this.setState(( obj={}, obj[`${name}`] = e.target.value, obj )); // 以上等价于下面的方法 /*this.setState({ [name]: e.target.value });*/ console.log(this.state); } handleSubmit = (e) => { // 阻止事件 e.preventDefault(); const { date, title, amount, } = this.state; const parmas = { date, title, amount: Number.parseInt(amount, 10), }; RecoresAPI.create(parmas).then(response => { this.props.handleNewRecord(response.data); this.setState({ date: '', title: '', amount: '', }); }).catch(error => { console.log(error); }); } render() { const {date, title, amount} = this.state; return ( <form className="form-inline mb-3" onSubmit={this.handleSubmit}> <div className="form-group mr-1"> <input type="text" className="form-control" placeholder="Date" name="date" value={date} onChange={this.handleChange} /> </div> <div className="form-group mr-1"> <input type="text" className="form-control" placeholder="Title" name="title" value={title} onChange={this.handleChange} /> </div> <div className="form-group mr-1"> <input type="text" className="form-control" placeholder="Amount" name="amount" value={amount} onChange={this.handleChange} /> </div> <button type="submit" disabled={!this.valid()} className="btn btn-primary">Create Record</button> </form> ); } } export default RecordForm; // src\components\Record\index.js import React, {Component} from 'react'; import PropTypes from 'prop-types'; import * as RecordsAPI from '../../utils/RecordsAPI'; class Record extends Component { state = { edit: false, } handleToggle = () => { const {edit} = this.state; this.setState({ edit: !edit, }) } // 更新 handleEdit = (e) => { e.preventDefault(); const {id} = this.props.record; const targets = this.refs; const record = { id, date: targets.date.value, title: targets.title.value, amount: Number.parseInt(targets.amount.value, 10), }; RecordsAPI.update(id, record).then(response => { this.setState({edit: false}); this.props.handleEditRecord(this.props.record, response.data); }).catch(error => { console.log(error.message); }); } // 删除 handleDelete = (e) => { e.preventDefault(); const {id} = this.props.record; RecordsAPI.remove(id).then(response => { this.props.handleDeleteRecord(this.props.record); }).catch(error => { console.log(error) }) } recordRow = () => { const {date, title, amount} = this.props.record; return ( <tr> <td>{date}</td> <td>{title}</td> <td>{amount}</td> <td> <button className="btn btn-info mr-1" onClick={ this.handleToggle }>Edit</button> <button className="btn btn-danger" onClick={this.handleDelete}>Delete</button> </td> </tr> ); } recordForm = () => { const {date, title, amount} = this.props.record; return ( <tr> <td><input type="text" className="form-control" defaultValue={date} ref="date"/></td> <td><input type="text" className="form-control" defaultValue={title} ref="title"/></td> <td><input type="text" className="form-control" defaultValue={amount} ref="amount"/></td> <td> <button className="btn btn-info mr-1" onClick={ this.handleEdit }>Update</button> <button className="btn btn-danger" onClick={ this.handleToggle }>Cancel</button> </td> </tr> ); } render() { const {edit} = this.state; if (edit) { return this.recordForm(); } else { return this.recordRow(); } } } Record.propTypes = { date: PropTypes.string, title: PropTypes.string, amount: PropTypes.number, }; export default Record;
10:02
2019-09-06
-
对 benli615349 · 凡人 回复
使用一个随机数做 key,这样 dispatch 了这个 action 之后都会做强制更新,会产生不必要的 re-rendering。另外你为什么要这么麻烦做一个 id 在 reducer 里面呢?为什么不直接
reminders.map((reminder, index) => {
return (
{ reminder.text }
time
);
})嗯 item index 也可以
16:55 -
对 mzyd · 元婴 回复
那个日期的选项只要有一个没选 dueDate 就是空值~ 测试的时候记得都选上哦~
是的 谢谢
16:55 -
module.hot.accept 里面是不是必须传顶级组件? 因为我的顶级组件是写在 index 里面的 ,加载页面后没内容,且没报错
11:59
2019-09-05
© 汕尾市求知科技有限公司 | Rails365 Gitlab | Qiuzhi99 Gitlab | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号 | 粤ICP备19038915号
Top