Question

我一直在研究一个 React 项目，但我面临一个问题，即当我单击“添加到购物车”并选择该复选框时，当我取消选中该复选框时，它将忽略第一次单击该复选框，然后再次单击然后它会将价值添加到购物车中。我无法弄清楚为什么我会收到此错误。

class Something extends Component {
  constructor(props) {
    super(props);

    let defaultOptionValues = {};
    this.props.product.options.forEach((selector) => {
      defaultOptionValues[selector.name] = selector.values[0].value;
    });
    this.state = { selectedOptions: defaultOptionValues };

    this.handleOptionChange = this.handleOptionChange.bind(this);
    this.handleQuantityChange = this.handleQuantityChange.bind(this);
  }
  handleOptionChange(event) {
    const target = event.target;
    let selectedOptions = this.state.selectedOptions;
    selectedOptions[target.name] = target.value;
    const selectedVariant = this.props.client.product.helpers.variantForOptions(
      this.props.product,
      selectedOptions
    );

    this.setState({
      selectedVariant: selectedVariant,
      selectedVariantImage: selectedVariant.attrs.image,
    });
  }


  handleQuantityChange(event) {
    this.setState({
      selectedVariantQuantity: event.target.value,
    });
  }

  render() {
    const { title, images, options } = this.props.product;
    let variantImage =
      this.state.selectedVariantImage || this.props.product.images[0];
    let variant = this.state.selectedVariant || this.props.product.variants[0];
    let variantQuantity = this.state.selectedVariantQuantity || 1;
    let SelectedTwoAccessoriesQuantity = 0;
    let SelectedFourAccessoriesQuantity = 0;
    let discountedPrice = variant.price * 0.8;
    let roundedPrice = discountedPrice.toFixed(2);
    const addToCartButton = (
      <button
        className="body-text"
        onClick={() => {
          this.props.addVariantToCart(variant.id, variantQuantity) &&
            this.props.addVariantToCart(
              this.props.accessories.variants[0].id,
              SelectedTwoAccessoriesQuantity + SelectedFourAccessoriesQuantity
            );
        }}
      >
        Add To Cart
      </button>
    );
    // QUANTITY FIELD
    const quantityField = (
      <label>
        <input
          className="body-text"
          min="1"
          type="number"
          defaultValue={variantQuantity}
          onChange={this.handleQuantityChange}
        ></input>
      </label>
    );
    
    function onChange(e) {
      console.log(`checked = ${e.target.checked}`);
    }

    <Checkbox onChange={onChange}>Checkbox</Checkbox>;
    return (
      <>
        <Container className="mattress-container" fluid={true}>
                    <span className="discountP">10% off</span>
                     <p className="mattress-size">Size</p>
                    {variantSelectors}
                    <div>
                      <Row className=" accessories-stlye">
                        <span>Accessories</span>{" "}
                      </Row>

                      <Row className="Checkbox-1">
                        <Col md="10">
                          <Checkbox
                            onChange={(e) => {
                              const isChecked = e.target.checked;
                              isChecked && (SelectedTwoAccessoriesQuantity = 2);
                              !isChecked &&
                                (SelectedTwoAccessoriesQuantity = 0);
                            }}
                            style={{ marginLeft: "-17px" }}
                          />{" "}
                          <span>x2</span>{" "}
                        </Col>
                        <Col md="2">
                          <span>
                            ${this.props.accessories.variants[0].price * 2}
                          </span>
                         
                        </Col>
                      </Row>

                      <Row className="Checkbox-1">
                        <Col md="10">
                          <Checkbox
                            onChange={(e) => {
                              const isChecked = e.target.checked;
                              
                              isChecked &&
                                (SelectedFourAccessoriesQuantity = 4);
                              !isChecked &&
                                (SelectedFourAccessoriesQuantity = 0);

                                console.log(SelectedFourAccessoriesQuantity)
                            }}
                            style={{ marginLeft: "-17px" }}
                          />{" "}
                          <span>x4 </span>
                        </Col>
                       
                        <Col md="2">
                          <span>
                            {console.log(this.props.accessories.variants[0].price * 4)}
                            ${this.props.accessories.variants[0].price * 4}
                          </span>
                        </Col>
                      </Row>

我已尝试删除所有不相关的代码以使其更易于理解。例如，如果我点击 x4，它应该添加 4 次，床垫也应该添加一次。但它正在做的是跳过枕头而只添加床垫。当我取消选中并再次单击复选框时，它会将值添加到购物车中。

Answer 1

尝试绑定 onChange 函数，因为我看到您的 onChange 函数未绑定。

Answer 2

可以使用箭头函数，不能使用绑定

public class LiveData extends AndroidViewModel {
    SavedStateHandle handle;
    private static final String KEY_CALENDAR= "KEY_CALENDAR"; //calendar
    private static final String SAVE_SHP = "save_sharedper";

    public LiveData(@NonNull Application application, SavedStateHandle handle) {
        super(application);
        if (!handle.contains(KEY_NUM1)){
            SharedPreferences shp = getApplication().getSharedPreferences(SAVE_SHP, Context.MODE_PRIVATE);
            handle.set(KEY_NUM1,shp.getInt(KEY_NUM1, 0));
            handle.set(KEY_CALENDAR,shp.getString(KEY_CALENDAR, null));
        }
        this.handle = handle;
    }
    private MutableLiveData<Integer> number;
    public MutableLiveData<Integer> getNumber(){
        return handle.getLiveData(KEY_NUM1);
    }
    private MutableLiveData<String> calendar;
    public MutableLiveData<String> getCalendar(){
        return handle.getLiveData(KEY_CALENDAR);
    }
    void save(){ // press navigation and then will do this function
        SharedPreferences shp = getApplication().getSharedPreferences(SAVE_SHP, Context.MODE_PRIVATE);
        SharedPreferences.Editor editor =shp.edit();
        editor.putInt(KEY_NUM1, getNumber().getValue());
        editor.putString(KEY_CALENDAR, getCalendar().getValue());
        editor.putString(KEY_TIME, getTime().getValue());
        editor.apply();
    }
}

Answer 3

this.setState({
      selectedVariant: selectedVariant,
      selectedVariantImage: selectedVariant.attrs.image,
    });

您应该定义参数 =>selectedVariant,selectedVariantImage

this.state = { selectedOptions: defaultOptionValues,
selectedVariant:'',
selectedVariantImage:''
 };

并定义您要使用的每个状态

状态未正确更新 React

3 个答案: