React useDefault钩子

创建一个带有默认回退值的有状态值，如果它是null或undefined，则使用默认回退值，并提供一个更新它的函数。

• 使用useState()钩子创建有状态值。
• 检查值是否为null或undefined。
• 如果是，则返回defaultState，否则返回实际的value状态以及setValue函数。

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 />
);