customHooks | react-hooks之自定义hooks | Frontend Framework library

My guess is that your useAuth(props) is returning a falsey value and thus no children are returned.

I've managed to fix it with this hook:

Not entierly sure what you want to accomplish. For me custom hooks should be reusable and descriptive of their response. The useSignup I guess is fine but useValidation to me sounds like it should not be bound to useSignup and may possibly be used in other forms aswell with different elements and validation rules.

Code below can be found and tested at https://codesandbox.io/s/musing-vaughan-srw66

If you want to use custom hooks for forms an idea is to make the entire form a single hook. In the code I am not using useSignup or useValidateor but instead useForm which handles both form elements and event logic. Default values can either be added as an optional third argument to useForm or in value prop on form element with values.email || 'test@testson.com'. I have also outsourced the validate function so that useForm can be used with any form and validate method to make it reusable.

You’re missing the parens on useOpen. Should be useOpen().

You can manage a state with localStorage.

When a modal activate, set a value to localStorage.

+)

As mentioned in the docs, you can simply create a min Date with new Date(new Date().getTime() + 86400000) and you can set that with the minDate prop.

If you combine that to set the initial date to be after this min date, it will work.

ProcessInput is returning an object, but you are destructuring it to an array.

Try this:

The problem happens when you try to access the returned value because on initial render the value is not available since the effect runs post render cycle and also because the axios request is async.

It will however work if you actually initialize the state to object within your custom hook

Also make sure that you set res.data.item in the state and not res. Post that you can get the value with item.title

SideNotes:

Please ensure that you prefix your custom hooks names with use which actually helps eslint figure out the distinction between custom hook or a function.

Also since you are making an API call based on param id, I advice you to pass that id as a dependency to useEffect in custom hook so that the scenarios where id is changed also work seamlessly

I'll prefer option two, test only the Counter component behavior using react-testing-library. Using hooks is an implementation detail, and testing the behavior of the component in an "integration" test is the way to go in this case. Testing this way will also reflect the way the final user is going to use your component.

However, this changes if you're creating a hook that you're going to publish to reuse by other developers. In this case the hook will be part of your package API, so it should be tested individually.

I must also say that this is a matter of personal preferences, and there is people that prefers to unit test everything.