组件正在将不受控制的输入更改为受控

Question

我正在尝试执行折扣价逻辑

折扣价应默认为实际价格，因为0%折扣表示折扣价与实际价格相同。

当我这样做时，我收到了这个错误，它有时会随机变化，但大多数时候它工作正常。

import React, { Fragment, useState } from "react";
 
const App = () => {
  const [price, setPrice] = useState();
  const [discountPrice, setDiscountPrice] = useState();
  const [discountRate, setDiscountRate] = useState(0);

  const submitHandler = async () => {
    console.log("hello");
  };

  return (
    <>
      <Fragment>
        <div className="row">
          <div className="col-12 col-md-10">
            <Fragment>
              <div className="wrapper my-5">
                <form
                  onSubmit={submitHandler}
                >
                  <div className="form-group">
                    <label htmlFor="price_field">Price</label>
                    <input
                     
                      value={price}
                      onChange={(e) => {
                        setPrice(e.target.value);
                        setDiscountPrice(e.target.value);
                      }}
                    />
                  </div>
                  <div className="form-group">
                    <label htmlFor="discounted_price">Discounted Price</label>
                    <input
                      value={discountPrice}
                      onChange={(e) => {
                        setDiscountPrice(e.target.value);
                        setDiscountRate(
                          ((price - e.target.value) / price) * 100
                        );
                      }}
                    />
                  </div>
                  <div className="form-group">
                    <label htmlFor="discounted_rate">Discount Rate</label>
                    <div className="input-group mb-3">
                      <input
                       value={discountRate}
                        onChange={(e) => {
                          setDiscountRate(e.target.value);
                          setDiscountPrice(
                            price - (e.target.value / 100) * price
                          );
                        }}
                      />
                    </div>
                  </div>
                </form>
              </div>
              <></>
            </Fragment>
          </div>
        </div>
      </Fragment>
    </>
  );
};

export default App;

以及如何实际查看折扣价格值是否为空？

我试过了

discountPrice == "" || discountPrice.trim() = "" || discountPrice== null
discountPrice.trim()===""

不工作，说 trim 不是函数

Answer 1

添加初始值，如，

  const [price, setPrice] = useState(0);
  const [discountPrice, setDiscountPrice] = useState(0);

组件正在将不受控制的输入更改为受控

A component is changing an uncontrolled input to be controlled

javascript

reactjs

forms

validation

trim