我想设置输入字段的默认值，但是它并不提供正确的默认值，而无需重新加载，并在该字段中显示以前的默认值

Question

我正在尝试显示所选产品的MinorderQuantity，但它为我提供了以前选择的输入字段默认值的MinorderQuantity数据。

const { data: product, isLoading, refetch } = useQuery('camera', () => fetch(`http://localhost:5000/camera/${id}`)
    .then(res => res.json()))
  const [quantity, setQuantity] = useState(product?.minOrderQuantity || 0);
  const [error, setError] = useState(false);
  if (isLoading) {
    return <Loading />
  }
  refetch()
  const { name, image, description, minOrderQuantity, available, price } = product;
  let quantityError;
  const handleQuantityInput = (e) => {

    setQuantity(e.target.value);
    if (quantity > available || quantity < minOrderQuantity) {
      setError(true);
      quantityError = <p>Invalid Quantity given</p>
    } else {
      setError(false);
    }
  }

<form onSubmit={handleSubmitForm}>
            <div className="form-control w-full max-w-xs">
              <input type="text" placeholder="Your Name" name='username' className="input mb-5 input-bordered w-full max-w-xs" />
              <input type="text" value={user?.email} className="input mb-5 text-gray-500 input-bordered w-full max-w-xs" />
              <label className="label">
                <span className="label-text font-semibold">We don't take less than {minOrderQuantity} order for this item</span>
              </label>
              <input onChange={(event) => handleQuantityInput(event)}
                defaultValue={minOrderQuantity} type="number" name='quantity' className="input input-bordered w-full max-w-xs" />
              {error &&
                <label className="label">
                  <span className="label-text-alt text-red-600">{quantityError}</span>
                </label>}
              <p className='text-2xl font-semibold my-5'>Total Price: ${quantity * price}</p>
              <input type="text" placeholder="Your Address" className="input mb-5 input-bordered w-full max-w-xs" />
              <input className="btn btn-primary"
                disabled={quantity < minOrderQuantity || quantity > available}
                type='submit' value='Place Order' />
            </div>
          </form>

它给了我以下我不明白的警告：

Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

Answer 1

首先，您仅向这些输入字段提供的无需onchange Prop提供价值道具。
它引起了您所看到的警告。
如果您不需要获取输入字段的变化值，则可以将值支架更改为DefaultValue Prop。

<input type="text" value={user?.email} className="input mb-5 text-gray-500 input-bordered w-full max-w-xs" />
....
<input className="btn btn-primary" disabled={quantity < minOrderQuantity || quantity > available} type='submit' value='Place Order' />

然后，至于DefaultValue更新，DefaultValue仅在组件的初始负载下设置一次。

我相信 react-更改输入defaultValue通过Props 将解决您的麻烦。