react-hooks

问题 I am writing a custom hook to fetch some data from an API. I would like the returned data to be type-safe if possible. Can this be done with generics? type Action = { type: 'PENDING' } | { type: 'SUCCESS'; payload: any } | { type: 'FAIL' }; interface State { isLoading: boolean; isError: boolean; data: any; } const dataFetchReducer = (state: State, action: Action): State => { switch (action.type) { case 'PENDING': return { ...state, isLoading: true, }; case 'SUCCESS': { return { ...state,

问题 I am trying to authenticate user on each route change with react-router-dom and react hooks . The idea is that each time user navigates to a route the system makes an api call and authenticate the user. I need to achieve this because I use react-redux , and on each window reload the redux state is not persisted. So i need to set the isLoggedNow prop to true again: const PrivateRoute = ({ component: Component, checkOnEachRoute: checkReq, isUserLogged, ...rest }) => { const [isLoggedNow,

问题 I am trying to authenticate user on each route change with react-router-dom and react hooks . The idea is that each time user navigates to a route the system makes an api call and authenticate the user. I need to achieve this because I use react-redux , and on each window reload the redux state is not persisted. So i need to set the isLoggedNow prop to true again: const PrivateRoute = ({ component: Component, checkOnEachRoute: checkReq, isUserLogged, ...rest }) => { const [isLoggedNow,

问题 I'm using react-navigation and I have a dynamic header, so I'm using setParams and getting it in the title. const MyComponent = ({navigation}) => { useEffect(() => { const { setParams, state } = navigation const { params = {} } = state const { description } = params setParams({ headerTitle: description }) }, []) return (...) } MyComponent.navigationOptions = ({ navigation }) => ({ title: navigation.getParam('headerTitle') }) The problem here is that I only want to setParams once (so I use []

问题 I'm using react-navigation and I have a dynamic header, so I'm using setParams and getting it in the title. const MyComponent = ({navigation}) => { useEffect(() => { const { setParams, state } = navigation const { params = {} } = state const { description } = params setParams({ headerTitle: description }) }, []) return (...) } MyComponent.navigationOptions = ({ navigation }) => ({ title: navigation.getParam('headerTitle') }) The problem here is that I only want to setParams once (so I use []

问题 I'm using react-navigation and I have a dynamic header, so I'm using setParams and getting it in the title. const MyComponent = ({navigation}) => { useEffect(() => { const { setParams, state } = navigation const { params = {} } = state const { description } = params setParams({ headerTitle: description }) }, []) return (...) } MyComponent.navigationOptions = ({ navigation }) => ({ title: navigation.getParam('headerTitle') }) The problem here is that I only want to setParams once (so I use []

问题 Im new to hook and so is react,Ive been watching some tutorials lately,I saw Ben awad's video for dynamic forms and I tried replicating it.There he used a callback inside the useState updater function which seems new to me.He used link setPeople(currentPeople => {}) What is the argument currentPeople come from and why its used,Can you someone please explain,Thanks in advance! import { useState } from "react"; import "./App.css"; import { generate } from "shortid"; interface Person { id:

问题 on react docs forms section there is the following example using class components: class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoing: true, numberOfGuests: 2 }; this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); } render() { return ( <form>

问题 on react docs forms section there is the following example using class components: class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoing: true, numberOfGuests: 2 }; this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); } render() { return ( <form>

问题 Here is my custom hook: export function useClientRect() { const [scrollH, setScrollH] = useState(0); const [clientH, setClientH] = useState(0); const ref = useCallback(node => { if (node !== null) { setScrollH(node.scrollHeight); setClientH(node.clientHeight); } }, []); return [scrollH, clientH, ref]; } } I want each time that it is called, it return my values. like: jest.mock('useClientRect', () => [300, 200, () => {}]); How can I achieve this? 回答1: Load the hook as a module. Then mock the