이 양식을 redux로 어떻게 관리합니까?

Question

나는 온라인 상점을 짓고 있어요 나는 사용자가 전체 가격에 추가됩니다 옵션과 옵션의 가격을 선택하는 양식을 만드는거야

class SingleProduct extends Component { 
constructor(props) { 
    super(props); 
    this.state = {}; 

    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 
    handleChange(event) { 
    this.setState({value: event.target.value}); 
    } 

    handleSubmit(event) { 
    event.preventDefault(); 

    var products = this.props.products.products; 

     var ID = this.props.router.location.pathname.slice(9, 100) 

      var productArray = this.props.products.products.data.filter(function(product) { 
       return product.id === ID; 
      }) 

      var product = productArray[0]; 
     var addToCart = (id, options) => { 
     this.props.dispatch((dispatch) => { 

      if(this.props.value == 'select'){ 
       this.props.product.options = 0; 
      } 
      else if(this.state.value == 'no-edge'){ 
       this.props.product.options = 0; 
      } 
      else if(this.state.value == '2inchHemOnly'){ 
       this.props.product.options = 20; 
      } 
      else if(this.state.value == '2inchHG'){ 
       this.props.product.options = 25; 
      } 
      else if(this.state.value == 'HandG'){ 
       this.props.product.options = 30; 
      } 
      else if(this.state.value == 'rope-rail'){ 
       this.props.product.options = 35; 
      } 
      else if(this.state.value == 'pole-pocket'){ 
       this.props.product.options = 40; 
      } 
     var values = this.props.product.values; 
     var options = this.props.product.options; 
      api.AddCart(id, this.props.product.quantity) 

      .then((options) => { 
       console.log(options) 
       dispatch({type: "Update_Options", payload: options}) 
      }) 
      .then((values) => { 
      console.log(values) 
      dispatch({type: "Update_Value", payload: values}) 
      }) 
      .then((cart) => { 
      console.log(cart) 
      dispatch({type: "Cart_Updated", gotNew: false}) 
      }) 

      .then(() => { 
       dispatch({type: "Fetch_Cart_Start", gotNew: false}) 

       api.GetCartItems() 

       .then((cart, options, values) => { 
       dispatch({type: "Fetch_Cart_End", payload: cart, gotNew: true}) 
       dispatch({type: "Update_Options", payload: options}) 
       dispatch({type: "Update_Value", payload: values}) 
       }) 
      }) 
      .then(() => { 
       console.error(options) 
      }) 
      .catch((e) => { 
      console.log(e) 
      }) 
     }) 
     } 

     addToCart(product.id); 
    } 
return (
    <main role="main" id="container" className="main-container push"> 
    <section className="product"> 
     <div className="content"> 
      <div className="product-listing"> 

       <div className="product-description"> 
        <p className="price"><span className="hide-content">Unit price </span>{'$' + product.meta.display_price.with_tax.amount/100 + this.props.product.options}</p> 
       <form className="product" onSubmit={this.handleSubmit.bind(this)}> 
        <label>SELECT EDGING OPTION</label> 
        <select name="edging" value={this.state.value} onChange={this.handleChange}> 
          <option value="select">-- Please select --</option> 
          <option value="no-edge">No Edge</option> 
          <option value="2inchHemOnly">2” Hem Only</option> 
          <option value="2inchHG">2” Hem and Grommets 24” On Center</option> 
          <option value="HandG">Hem and Grommets 12” on Center</option> 
        </select> 

         <div className="quantity-input" style={style}> 
          <p className="hide-content">Product quantity.</p> 


         <button type="submit" className="submit">Add to cart</button> 
       </form> 
       </div> 
      </div> 

     </section> 
     <MailingList /> 
    </main> 
) 
} 
} 

export default connect(mapStateToProps)(SingleProduct); 

그리고 여기 내 감속기입니다 : 나는 쇼핑 카트에 추가 할 때 내 '값이'정의되지

const initialState = { 
quantity: 1, 
options: 0, 
values: [ 
{ value: '-- Please select --' }, 
{ value: 'No Edge' }, 
{ value: '2” Hem Only' }, 
{ value: 'No Edge' }, 
{ value: '2” Hem and Grommets 24” On Center' }, 
{ value: 'Hem and Grommets 12” on Center' } 
] 
} 

const ProductReducer = (state=initialState, action) => { 
switch (action.type) { 
case "Update_Quantity": { 
    return {...state, quantity: action.payload}; 
} 
case "Update_Options": { 
    return {...state, 
    options: action.payload}; 
} 
case "Update_Value": { 
    return {...state, 
    value: action.payload}; 
} 
default: { 
    return {...state}; 
} 
} 
}; 

export default ProductReducer; 

. 새로 고침 할 때 '옵션'은 0으로 돌아갑니다. 내 수량은 상태로 유지됩니다. 왜 이런 일이 일어나는 지 모르겠습니다.

Answer 1

응답 문서 상태 : 구성 요소를 함수 또는 클래스로 선언하더라도 자체 소품을 수정해서는 안됩니다.

따라서, 변수에 props 사본을 만들고 사본을 수정할 수 있습니다. 라인 var addToCart = (id, options) => {

위

let propsCopy = { ...this.props } 

후 후속 행에 소품 대신에 propsCopy를 사용 :이 작업을 수행하는 한 가지 방법은이 줄을 배치 할 수 있습니다.