當我進入編輯頁面，或者重繪頁面時
讀取了三次，前兩次為空，第三次才正確
第3次獲取到了資料
當我退出再回到這個頁面時
但是重繪，還是拿不到初始值
.............................下面是我的主要代碼
import React from 'react'
import { connect } from 'react-redux'
import { Form, Input, Button, Select,InputNumber } from 'antd';
import Layout from '@common/layout'
import UploadImgs from '@common/upload-image'
import RichEditor from '@common/rich-editor'
import { actionCreators } from './store/index.js'
import { UPLAOD_IMAGES,UPLAOD_PRODUCT_DETAIL_IMAGES } from '@api'
const { Option } = Select;
const layout = {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
span: 16,
},
};
const tailLayout = {
wrapperCol: {
offset: 5,
span: 16,
},
};
class Demo extends React.Component {
formRef = React.createRef();
constructor(props){
super(props)
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
productId:this.props.match.params.productId,
}
}
componentDidMount(){
//加載最新商品分類
this.props.handleLevelCategories()
//如果有id傳過來則為編輯商品,我們需要獲取該id下的商品資訊然后回傳
if(this.state.productId){
this.props.handleProductEdit(this.state.productId);
}
}
componentDidUpdate(prevProps, prevState,snapshot){
/*
if(this.state.productId){
this.formRef.current.setFieldsValue({
"category":this.props.category,
"name":this.props.name,
"description":this.props.description,
"price":this.props.price,
"stock":this.props.stock,
// "productDetail":this.props.detail,
})
}
*/
// console.log(this.props)
}
handleSubmit(){
let valuesForm = null;
this.formRef.current.validateFields()
.then(values => {
// this.props.handleSave(values)
valuesForm=values;
this.props.handleErrorInfo(false)//如果表單修改后正確，則更新狀態
})
.catch(err => {
// console.log('Validate Failed:', err)
//如果表單<Input/>驗證有錯誤，修改狀態errorSave為true
this.props.handleErrorInfo(true)
})
.finally(()=>{
//我們希望同步驗證,自定義組件也能一起顯示錯誤提示
// console.log('valuesForm',valuesForm)
valuesForm.id = this.state.productId;
this.props.handleSave(valuesForm)
})
}
render() {
let {
categories,
category,
name,
description,
price,
stock,
} = this.props;
console.log(this.props)
return (
<Layout>
<Form {...layout} ref={this.formRef}>
<Form.Item
name="category"
label="商品分類"
rules={[
{
required: true,
message: '請選擇商品分類!'
},
]}
initialValue=https://bbs.csdn.net/topics/{category}
>
<Select
placeholder="商品分類"
>
{
categories.map((item)=>{
return <Option key={item.get('_id')} value=https://bbs.csdn.net/topics/{item.get('_id')}>{item.get('name')}</Option>
//value=https://bbs.csdn.net/topics/{item.get('_id')}當新增商品時，我們在保存商品到資料庫時需要獲取該商品屬于哪個分類
})
}
</Select>
</Form.Item>
<Form.Item
name="name"
label="商品名稱"
rules={[
{
required: true,
message: '請輸入商品名稱!'
},
]}
initialValue=https://bbs.csdn.net/topics/{name}
>
<Input />
</Form.Item>
<Form.Item
name="description"
label="商品描述"
rules={[
{
required: true,
message: '請輸入商品描述!'
},
]}
initialValue=https://bbs.csdn.net/topics/{description}
>
<Input />
</Form.Item>
<Form.Item
name="price"
label="商品價格"
rules={[
{
required: true,
message: '請輸入商品價格!'
},
]}
// initialValue=https://bbs.csdn.net/topics/{price}
>
<InputNumber />
</Form.Item>
<Form.Item
name="stock"
label="商品庫存"
rules={[
{
required: true,
message: '請輸入商品庫存!'
},
]}
// initialValue=https://bbs.csdn.net/topics/{stock}
>
<InputNumber />
</Form.Item>
</Form>
</Layout>
);
}
}
//將屬性映射到組件
const mapStateToProps = (state)=>{
// console.log(state.get('product').get('name'))
return {
//獲取商品分類
categories:state.get('product').get('categories'),
//自定義錯誤狀態
mainImageValidateStatus:state.get('product').get('mainImageValidateStatus'),
mainImageHelp:state.get('product').get('mainImageHelp'),
imagesValidateStatus:state.get('product').get('imagesValidateStatus'),
imagesHelp:state.get('product').get('imagesHelp'),
//獲取商品詳情
category:state.get('product').get('category'),
name:state.get('product').get('name'),
description:state.get('product').get('description'),
price:state.get('product').get('price'),
stock:state.get('product').get('stock'),
mainImage:state.get('product').get('mainImage'),
images:state.get('product').get('images'),
detail:state.get('product').get('detail'),
}
}
//將方法映射到組件
const mapDispatchToProps = (dispatch)=>({
//獲取商品分類
handleLevelCategories:()=>{
dispatch(actionCreators.getLevelCategoriesAction())
},
//提交新增商品資料到后臺
handleSave(values){
dispatch(actionCreators.getSavePrductsAction(values))
},
//編輯商品頁，資料回傳
handleProductEdit:(id)=>{
// console.log(id);
dispatch(actionCreators.getProductEditAction(id))
}
})
export default connect(mapStateToProps,mapDispatchToProps)(Demo)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/10675.html
標籤：JavaScript
上一篇：精簡win10怎么安裝iis