最新值來自 props，但是當它被添加為 state 的初始值時，它沒有顯示出來。
import React, { useRef, useState } from "react";
//import config from "../../../../../../config";
//import { getAuthToken } from "../../../../../utils/auth";
import styles from "./ContentRowPrice.module.css";
const ContentRowPrice = (props) => {
const [priceInput, setPriceInput] = useState(props.price);
// const priceInput = useRef();
// const handleBlur = () => {
// const price = parseFloat(priceInput.current.value);
// if (props.price === price) {
// } else {
// props.onPaywallChange(price);
// }
// };
const classes = styles["contentrowprice-input"];
return (
<>
<span>{props.price}</span>
<span>{priceInput}</span>
<input
id={`paywall_${props.price}_${props.id}`}
type="number"
min="0"
step="0.01"
// ref={priceInput}
// defaultValue={props.price}
value={priceInput}
className={classes}
// onBlur={handleBlur}
/>
</>
);
};
export default ContentRowPrice;
我意識到值 10 實際上來自之前代替上述輸入的輸入的一件事。
uj5u.com熱心網友回復：
React 組件的第一次渲染是空值，這是 React 組件創建組件和帶有useState鉤子的狀態的時刻。
當您在 中分配它時useState，它不會在沒有useEffect鉤子的情況下在第二次（或以后）重新渲染時發生變化。
useEffect(() => {
setPriceInput(props.price);
}, [props.price]);
有關此問題的更多資訊，您可以在這里閱讀：https : //medium.com/@digruby/do-not-use-props-as-default-value-of-react-usestate-directly-818ee192f454
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/317752.html