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;

当我添加到购物车时，我的价值是＆＃39;未定义。在刷新时，＆＃39;选项＆＃39;回到0.虽然我的数量保持在状态。我只是不知道为什么会这样。

Answer 1

react文档说明：无论是将组件声明为函数还是类，它都不能修改自己的道具。

因此，您可能希望将props的副本复制到变量中，然后修改副本。一种方法可能是放置这一行：

let propsCopy = { ...this.props }

在var addToCart = (id, options) => {

行之上

然后使用propsCopy代替后续行中的道具。

如何在redux中管理此表单？

1 个答案: