1 回答

TA貢獻1846條經驗 獲得超7個贊
來自 React 組件文檔
如果您想在 prop 更改時“重置”某些狀態,請考慮......用鍵完全不受控制。
在要重置為初始狀態的組件上使用反應鍵。
當第一個更新時,您可以將其用作要重置的countOne
第二個的密鑰。提供作為第二個的初始值。刪除重復的狀態,因為它是不必要的。并使回調可選,但將新的狀態值傳遞給回調,即,或使用效果來處理它,否則狀態值將不同步。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>
);
}
如果您不想使用反應鍵來重置為初始狀態,那么您可以提供另一個道具作為第二個useEffect鉤子中的依賴項以重置為提供的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道具,以便在更新時重置計數countOne。
<Counter2 reset={countOne} initialCount={countOne % 2} />
添加回答
舉報