Question

因此，我有一个购物车，每当您添加相同的商品时，添加的商品数量就会动态地增加+1，并且在购物车本身内，可以通过任何首选用户编号手动更改添加的商品数量

如果我在输入字段中使用value=""属性，则会正确动态更新该值，但是不允许我手动更改该值。而且，如果我使用defaultValue=""，则每次添加项目时该值都不会正确更新，但是允许我根据需要手动更改该值。

如何既可以正确显示动态值又可以根据需要更新值字段？我的代码如下：

class CartItem2 extends Component {
    constructor(props) {
        super(props);
    }
    handleChange = e => {
      const { name, type, value } = e.target;
      const val = type === 'number' ? parseFloat(value) : value;
      this.setState(() => { return { [name]: val }});
    };
    updateCartItem = async (e, updateCartItemMutation) => {
      e.preventDefault();
      console.log('Updating Cart Item!!');
      console.log(this.state);
      const res = await updateCartItemMutation({
        variables: {
          id: this.props.cartItem.id,
          quantity: this.state.quantity,
        },
      });
      console.log('Updated!!');
    };
    static getDerivedStateFromProps(nextProps, prevState){
        if (nextProps.cartItem.quantity !== prevState.quantity) {
            console.log("nextProps ", nextProps);
            console.log("prevState", prevState);
            return {quantity: nextProps.cartItem.quantity};
        }
        else return null;
    }

    render() {
        const { cartItem, client } = this.props;
        const { quantity } = this.state;

        return (
            <CartItemStyles>
                <img width="100" src={cartItem.item.image} alt={cartItem.item.title} />
                <div className="cart-item-details">
                <h3>{cartItem.item.title}</h3>
                <p>
                    {formatMoney(cartItem.item.price * cartItem.quantity)}
                    {' - '}
                    <em>
                        {cartItem.quantity} &times; {formatMoney(cartItem.item.price)} each
                    </em>
                </p>
                <Mutation 
                    mutation={UPDATE_CART_ITEM_MUTATION} 
                    variables={this.state}
                >
                    {(updateCartItem, { loading, error }) => {
                    return (
                        <Form2 key={cartItem.id} onSubmit={e => this.updateCartItem(e, updateCartItem)}>
                        <Error error={error} />
                        <label htmlFor="quantity">
                        <input
                            type="number"
                            id="quantity"
                            name="quantity"
                            placeholder="Quantity"
                            required
                            value={quantity}
                            onChange={this.handleChange}
                        />
                        </label>
                        <button type="submit">Updat{loading ? 'ing' : 'e'}</button>
                        </Form2>
                    )
                    }}
                </Mutation>
                </div>
            <RemoveFromCart id={cartItem.id} />
          </CartItemStyles>
        );
    }
}

如果您转到此处：flamingo-next-production.herokuapp.com，请使用testing123@123.com和testing123登录，然后单击“购物”，然后单击“购物车”，然后将购物车添加到同一项目的倍数，然后转到购物车，然后尝试手动更改商品价值。

Answer 1

您似乎正在使用状态中的默认值进行受控输入？如果是这样，则需要将状态中的初始数量设置为cartItem.quantity值。

下面缺少很多参考，但是您应该明白这一点。

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

    this.state = {
      quantity: props.cartItem.quantity,
    };
  }


  handleChange = e => {
    const { name, type, value } = e.target;
    const val = type === 'number' ? parseFloat(value) : value;

    this.setState({ [name]: val });
  };

  render() {
    const { quantity } = this.state;

    return (
      <Mutation
        mutation={UPDATE_CART_ITEM_MUTATION}
        variables={this.state}
      >
        {(updateCartItem, { loading, error }) => {
          return (
            <Form2 onSubmit={e => this.updateCartItem(e, updateCartItem)}>
              <Error error={error} />
              <label htmlFor="quantity">
                <input
                  type="number"
                  id="quantity"
                  name="quantity"
                  placeholder="Quantity"
                  value={quantity}
                  onChange={this.handleChange}
                  required
                />
              </label>
              <button type="submit">Updat{loading ? 'ing' : 'e'}</button>
            </Form2>
          )
        }}
      </Mutation>
    )
  }
}

Answer 2

我认为问题在于您正在将道具carItem的值传递给defaultValue，但是onChange却更改了未传递给defaultValue的状态。

要解决此问题，您需要将状态传递给defaultValue或在onChange中更新prop carItem

Answer 3

通过删除static getDerivedStateFromProps()并替换为：

，此问题已解决。

    componentDidUpdate(prevProps, prevState) {
        if (this.props.cartItem.quantity !== prevProps.cartItem.quantity) {
            let quantity = this.props.cartItem.quantity;
            this.setState(() => {
                return {
                    quantity
                }}
            );
        }
    }
    componentDidMount() {
        let quantity = this.props.cartItem.quantity;
        this.setState(() => { 
            return {
                quantity
            }}
        );       
    }

为什么value属性将输入呈现为只读，而defaultValue将其呈现为读写？

3 个答案: