このフォームを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); 

そして、ここでは私の減速で：私はカートに追加すると、私のvalueが未定義である

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

反応文書の状態：コンポーネントを関数として宣言しても、クラスとして宣言しても、それ自身の小道具を変更してはなりません。

したがって、変数にプロップのコピーを作成し、そのコピーを変更することができます。ライン​​

上記

let propsCopy = { ...this.props } 

とその後のラインで小道具の代わりにpropsCopyを使用します。これを行う方法の1つは、この行を配置するかもしれません。