我有一個名為 Date 的組件，其中包含三個變數。我還有一個名為setCurrentTimes的函式，它應該在每次使用當前值呼叫它時更新變數。
我在 react 的 useEffect中呼叫該函式，它不依賴于更新組件掛載上的變數。
這是日期組件。
const Date = () => {
var currentDate;
var currentTime;
var amOrPm;
const setCurrentTimes = () => {
currentDate = moment().format("d MMMM YYYY");
currentTime = moment().format(" h:mm:ss ");
amOrPm = moment().format("a");
};
useEffect(() => {
setCurrentTimes();
}, []);
return (
<div className="Date flex__container-v">
{amOrPm === "pm" ? (
<div className="Moon__icon flex__container">
<img src={Assets.Moon} alt="Moon Icon" />
<p className="p__poppins Date__greeting">Good Evening</p>
</div>
) : (
<div className="Sun__icon flex__container">
<img src={Assets.Sun} alt="Sun Icon" />
<p className="p__poppins Date__greeting">Good Morning</p>
</div>
)}
<div className="Date__btm flex__container">
<p className="p__poppins">{currentDate}</p>
<p className="p__poppins">{currentTime}</p>
</div>
</div>
);
};
組件根據變數回傳不同的東西。但是，它沒有按預期作業。當我嘗試注銷 return 陳述句中的變數時，我得到了未定義。
我不明白我做錯了什么。
uj5u.com熱心網友回復：
簡短的回答：使用狀態來解決這個問題。
更長的答案：
您可能希望 useEffect 在渲染之前運行，但事實并非如此。
useEffect 總是在組件的渲染階段之后呼叫。您的 ParentComponent 由 Input、Input 和 ChildComponent 組成。
在您的情況下，您正在嘗試顯示尚未設定的變數。如果您要使用 State 而不是變數，您的 UI 將在設定這些狀態后重新渲染。由于您使用的是變數，因此您的 UI 不會重新渲染，導致它始終顯示初始值（為空）。
簡化示例：
const Date = () => {
const [currentDate,setCurrentDate] = React.useState();
useEffect(() => {
setCurrentDate(moment().format("d MMMM YYYY"));
}, []);
return (
<div className="Date flex__container-v">
<div className="Date__btm flex__container">
<p className="p__poppins">{currentDate}</p>
</div>
</div>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/455677.html
標籤：javascript 反应