1 回答

TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊
來自 React 組件文檔
如果您想在 prop 更改時(shí)“重置”某些狀態(tài),請(qǐng)考慮......用鍵完全不受控制。
在要重置為初始狀態(tài)的組件上使用反應(yīng)鍵。
當(dāng)?shù)谝粋€(gè)更新時(shí),您可以將其用作要重置的countOne
第二個(gè)的密鑰。提供作為第二個(gè)的初始值。刪除重復(fù)的狀態(tài),因?yàn)樗遣槐匾?。并使回調(diào)可選,但將新的狀態(tài)值傳遞給回調(diào),即,或使用效果來處理它,否則狀態(tài)值將不同步。Counter
Counter
countOne % 2
Counter
countTwo
handleChange
count + counter
function Counter({ initialCount, handleChange }) {
const [count, setCount] = React.useState(initialCount);
const handleClick = (counter) => {
setCount(count + counter);
handleChange && handleChange(count + counter);
};
// or
useEffect(() => {
handleChange && handleChange(count);
}, [count, handleChange]);
const handleClick = (counter) => {
setCount(count + counter);
};
return (
<>
<h1>Counter {count}</h1>
<button
type="button"
onClick={() => handleClick(1)}
style={{ marginRight: "8px" }}
>
Add
</button>
<button type="button" onClick={() => handleClick(-1)}>
Subtract
</button>
</>
);
}
export default function App() {
const [countOne, setCountOne] = React.useState(1);
return (
<div className="App">
<Counter
initialCount={countOne}
handleChange={setCountOne}
/>
<Counter
key={countOne}
initialCount={countOne % 2}
/>
</div>
);
}
如果您不想使用反應(yīng)鍵來重置為初始狀態(tài),那么您可以提供另一個(gè)道具作為第二個(gè)useEffect鉤子中的依賴項(xiàng)以重置為提供的initialValue道具。
function Counter2({ initialCount, handleChange, reset }) {
const [count, setCount] = React.useState(initialCount);
useEffect(() => {
handleChange && handleChange(count);
}, [count, handleChange]);
useEffect(() => {
setCount(initialCount);
}, [reset, initialCount]);
const handleClick = (counter) => {
setCount(count + counter);
};
return (
<>
<h1>Counter 2: {count}</h1>
<button
type="button"
onClick={() => handleClick(1)}
style={{ marginRight: "8px" }}
>
Add
</button>
<button type="button" onClick={() => handleClick(-1)}>
Subtract
</button>
</>
);
}
傳遞countOne給reset道具,以便在更新時(shí)重置計(jì)數(shù)countOne。
<Counter2 reset={countOne} initialCount={countOne % 2} />
添加回答
舉報(bào)