前端遇到问题
两个对象相同key会被覆盖
sendObj={...sendObj, ...sendObj_zh[group]};
sendObj_zh[group]
sendObj={...sendObj, group:sendObj_zh[group]}; //应该是因为同一个key 所以后面的header把前面的替换了
js 对象的key为变量 加上[]
module/hero.js
export default { namespace: 'hero', // 默认与文件名相同 state: {heros:[],}, subscriptions: { setup({ dispatch, history }) { return history.listen(({ pathname, query }) => { if (pathname === '/hero') { dispatch({ type: 'fetch' }) } }); } }, reducers: { save(state, action) { return { ...state, ...action.payload }; }, }, effects: { *fetch({ type, payload }, { put, call, select }) { const data = [ { ename: 105, cname: '廉颇', title: '正义爆轰', new_type: 0, hero_type: 3, skin_name: '正义爆轰|地狱岩魂', }, { ename: 106, cname: '小乔', title: '恋之微风', new_type: 0, hero_type: 2, skin_name: '恋之微风|万圣前夜|天鹅之梦|纯白花嫁|缤纷独角兽', }, ]; yield put({ type: 'save', payload: { heros: data, }, }); }, }, }
pages/hero.js
import styles from './hero.css'; import { connect } from 'dva'; function Hero(props) { console.log(props.hero); return ( <div className={styles.normal}> <h1>Page hero</h1> <h2>This is {JSON.stringify(props.hero)}</h2> </div> ); } export default connect(({ hero }) => ({ hero }))(Hero);
const handleSubmit = (e: any) => {
e.preventDefault();
const {dispatch}=props;
loading=true;***********
props.form.validateFieldsAndScroll((err: any, values: any) => {
if (!err) {
dispatch({
type:'contact/send',
payload: {
...values
}
});
console.log('Received values of form: ', values);
}
});
};
在项目中我想改变把redux取下的变量的值，但是有函数作用域，必须用hook 或者class component 生命周期函数
react hook
顺序
hook
取值
构造
function
{eType} 等价于 eType: eType
antd:
getFieldValue只能取静态的值
form中 正则表达式不要引号
type: 'string',//不要用number 这是垃圾
{ len: isPaymentType? 6 : null,},//两个检查可以有两个括号
{ validator: isPaymentType ? checkBid : null }//validator是独立的，不依赖其他rules执行
<div className={styles.optionalLabel}>
<Form.Item label={
<Title />
}
hasFeedback
validateStatus={validatingType}
>
{getFieldDecorator('businessId', {
rules: [
{
required: isPaymentType,
type: 'string',//不要用number 这是垃圾
pattern: /^[0-9]*$/,
},
{ len: isPaymentType? 6 : null,},//两个检查可以有两个括号
{ validator: isPaymentType ? checkBid : null }//validator是独立的，不依赖其他rules执行
],
})(<Input placeholder={tx('t_Enter 6-digit BusinessID(optional)')} />)}
</Form.Item>
</div>
直接可以调用reduce 通过dispatch直接改变redux中的值 但是又不和后端交互
} else if (validatingType === 'success') { dispatch({ type: 'contact/setValidateResult', validateResult: false, });
javascript调用函数加不加括号的区别
https://blog.csdn.net/czh500/article/details/101953095
先要maptoProps 才能在props里取到
service 娶不到 mock 中的req.body
body从data中取 这是umi-request的要求
reducer取值：
step，email
前一个不对，一个reducer只能有一个操作。
effects:{ *sendResetPasswordRequest(email,{call, put}){ const response=yield call(postEmail,email); if (response.success) { yield put({ type: 'setPasswordStep', resetPasswordStep: 2, }); yield put({ type: 'saveEmail', email:response.result.email }); message.success(response.message); } if(response.error) { message.error(response.message); } } }, reducers:{ setPasswordStep(state = forgetSettings, { resetPasswordStep }, ) { return { ...state, resetPasswordStep, }; }, saveEmail(state = forgetSettings, { email }, ) { return { ...state, email }; }, },
从后台取出先save到redux 所以是save
如何取后台数据及制造后台数据
后台数据 拆分 一般是做成数组形式 然后map
const customersteps = [
{
t_SetUpYourProfile: [
{ t_CreateFirstMenuListing: false },
{ t_UploadPDFMenu: false },
{ t_ViewYourProfile: true },
{ t_UploadBusinessImage: true },
{ t_DownloadQRCode: false },
],
},
{
t_CreateDishPool: [{ a: false }],
},
];
customersteps.map((item)=>{console.log(item)})
const aaa = {
t_SetUpYourProfile: [
{ t_CreateFirstMenuListing: false },
{ t_UploadPDFMenu: false },
{ t_ViewYourProfile: true },
{ t_UploadBusinessImage: true },
{ t_DownloadQRCode: false },
],
}
Object.keys(aaa):
["t_SetUpYourProfile"]
Object.keys(aaa)[0]
"t_SetUpYourProfile"
aaa['t_SetUpYourProfile'] aaa是一个对象，所以取对象的value两种写法都可以
(5) [{…}, {…}, {…}, {…}, {…}]
aaa.t_SetUpYourProfile
(5) [{…}, {…}, {…}, {…}, {…}]
有时候只能用这种取对象value 估计是因为label是字符串的原因
<SlidebarLists item={item} label={label} firstFalseLabel={firstFalseLabel} />
读取localStorage
setEditingLang(state = odSettings, { editingLang }) { localStorage.setItem('popsup-edit-lang', editingLang); return { ...state, editingLang, }; export const readUserInfoFromStorage = () => { let userInfo: any = false; if (localStorage && localStorage.getItem('popsup-authorized-user-info')) { userInfo = JSON.parse(localStorage.getItem('popsup-authorized-user-info') as string); } //先从localStorage里面读 if (!userInfo) { //再从sessionStorage里面读 if (sessionStorage && sessionStorage.getItem('popsup-authorized-user-info')) { userInfo = JSON.parse(sessionStorage.getItem('popsup-authorized-user-info') as string); } } return userInfo; }; export const removeUserInfoFromStorage = () => { if (localStorage && localStorage.getItem('popsup-authorized-user-info')) { localStorage.removeItem('popsup-authorized-user-info'); } if (sessionStorage && sessionStorage.getItem('popsup-authorized-user-info')) { sessionStorage.removeItem('popsup-authorized-user-info'); } };
props里取不到值：
1.yarn start:no-mock
2.异步 在渲染之前没取到 用loading解决
const mockContent = ( <div> {tags.map((tag: any, key: any) => (key >= 3 ? <Tag>{tag}</Tag> : null)) } </div> );
正确
const mockContent = ()=>( <div> {tags.map((tag: any, key: any) => (key >= 3 ? <Tag>{tag}</Tag> : null)) } </div> )};
错误
既然是mockContent 不是 <mockContent />
ref:
https://www.shuzhiduo.com/A/ZOJPPWNEJv/
https://blog.csdn.net/qq_24724109/article/details/103817607
详细：
https://blog.csdn.net/weixin_43902189/article/details/99694359
expand 如何写 umi
import queryString from 'query-string';
const expandQuery = ['tag', 'menu', 'offering_type', 'pair'];
export async function getDishDetail(dishId: any): Promise<any> { return request(`/api/dish/${dishId}`, { method: 'GET', headers: { bearLang: 'edit', bearToken: 'auth', bearId: 'bId' }, params: { expand: expandQuery }, paramsSerializer: function(params) { const serealizedString = params['expand'] ? queryString.stringify(params, { arrayFormat: 'index' }) : ''; return serealizedString; }, }); }
