React useDelayedState Hook
延迟创建一个有状态值,直到满足某个条件。
- 使用
useState()
钩子创建一个包含实际state
和布尔值loaded
的有状态值。 - 使用
useEffect()
钩子在condition
或loaded
改变时更新有状态值。 - 创建一个名为
updateState
的函数,只有在loaded
为真时才更新state
值。
const useDelayedState = (initialState, condition) => {
const [{ state, loaded }, setState] = React.useState({
state: null,
loaded: false,
});
React.useEffect(() => {
if (!loaded && condition) setState({ state: initialState, loaded: true });
}, [condition, loaded]);
const updateState = newState => {
if (!loaded) return;
setState({ state: newState, loaded });
};
return [state, updateState];
};
const App = () => {
const [branches, setBranches] = React.useState([]);
const [selectedBranch, setSelectedBranch] = useDelayedState(
branches[0],
branches.length
);
React.useEffect(() => {
const handle = setTimeout(() => {
setBranches(['master', 'staging', 'test', 'dev']);
}, 2000);
return () => {
handle && clearTimeout(handle);
};
}, []);
return (
<div>
<p>Selected branch: {selectedBranch}</p>
<select onChange={e => setSelectedBranch(e.target.value)}>
{branches.map(branch => (
<option key={branch} value={branch}>
{branch}
</option>
))}
</select>
</div>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<App />
);
ReactDOM.createRoot(document.getElementById('root')).render(