Creates a stateful value with a default fallback if it’s null
or undefined
, and a function to update it.
- Use the
useState()
hook to create stateful value. - Check if the value is either
null
orundefined
. - Return the
defaultState
if it is, otherwise return the actualvalue
state, alongside thesetValue
function.
代码实现
const useDefault = (defaultState, initialState) => {
const [value, setValue] = React.useState(initialState);
const isValueEmpty = value === undefined || value === null;
return [isValueEmpty ? defaultState : value, setValue];
};
使用样例
const UserCard = () => {
const [user, setUser] = useDefault({ name: 'Adam' }, { name: 'John' });
return (
<>
<div>User: {user.name}</div>
<input onChange={e => setUser({ name: e.target.value })} />
<button onClick={() => setUser(null)}>Clear</button>
</>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<UserCard />
);