use-effect

问题 For example, if I have components A and B, and component B is the child of component A: <A> <B /> </A> Inside A we have: useEffect(() => { console.log('Parent A useEffect') }) Inside B we have: useEffect(() => { console.log('Child B useEffect') }) I did some tests and I saw 2 things: At the first load (after F5, for example), the log result is: Parent A useEffect Child B useEffect If we go to another component and then come back to component B (not by reloading but by using react-router, for

问题 I am building a carousel right now, in React. To scroll to the individual slides I am using document.querySelector like so : useEffect(() => { document.querySelector(`#slide-${activeSlide}`).scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' }); }, [activeSlide]); Is this bad practice? After all, I am accessing the DOM directly here? What would be the React way of doing this? edit: full return method return ( <> <button onClick={() => setActiveSlide(moveLeft)}>PREV<

问题 I am building a carousel right now, in React. To scroll to the individual slides I am using document.querySelector like so : useEffect(() => { document.querySelector(`#slide-${activeSlide}`).scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' }); }, [activeSlide]); Is this bad practice? After all, I am accessing the DOM directly here? What would be the React way of doing this? edit: full return method return ( <> <button onClick={() => setActiveSlide(moveLeft)}>PREV<

问题 I'm using a custom hook to get pull some data in from an API for use across a set of React function components. However, esLint throws up a lovely warning: React Hook useEffect has a missing dependency: 'fetchFromAPI'. Either include it or remove the dependency array. I didn't think it's a dependency, as it's inside useFetch() itself. I need to do it as I'm using await . What am I doing wrong? Is it ok to just turn off the warning for this line? Or is there a more canonical syntax I should be

问题 I'm getting an infinite loop with this code. I've been trying some of the solutions from another posts but they don't work. locationAddress is an array of addresses and I'm trying to get the coordinates using the Google Maps Geocode API. const reducer = (state, action) => { switch (action.type) { case 'add': return [ ...state, { address: action.address, name: action.name, id: action.id } ]; case 'remove': return state.filter((_, index) => index !== action.index) default: return state; } }

问题 I'm getting an infinite loop with this code. I've been trying some of the solutions from another posts but they don't work. locationAddress is an array of addresses and I'm trying to get the coordinates using the Google Maps Geocode API. const reducer = (state, action) => { switch (action.type) { case 'add': return [ ...state, { address: action.address, name: action.name, id: action.id } ]; case 'remove': return state.filter((_, index) => index !== action.index) default: return state; } }

问题 When page loaded first time, I need to get all information, that is why I am calling a fetch request and set results into State [singleCall function doing that work] Along with that, I am connecting websocket using socket.io and listening to two events (odds_insert_one_two, odds_update_one_two), When I got notify event, I have to check with previous state and modify some content and update the state without calling again fetch request. But that previous state is still [] (Initial). How to get

问题 When page loaded first time, I need to get all information, that is why I am calling a fetch request and set results into State [singleCall function doing that work] Along with that, I am connecting websocket using socket.io and listening to two events (odds_insert_one_two, odds_update_one_two), When I got notify event, I have to check with previous state and modify some content and update the state without calling again fetch request. But that previous state is still [] (Initial). How to get

问题 I have this code and my question is why inside my answer function I get the initialState. How to set the state in a proper way to get the right one inside a callback of setTimeout function? const App = () => { const [state, setState] = useState({ name: "", password: "", }); useEffect(() => { setState({ ...state, password: "hello" }); setTimeout(answer, 1000); }, []); const answer = () => { console.log(state); // we get initial State }; return <div className="App"></div>; }; 回答1: The reason is

问题 I'm trying to write a React functional component that requests a list of people exposed across multiple pages in an API: https://swapi.dev/api/people/?page=9 I know there are currently nine pages, but this might change in the future, so I want my component to keep requesting pages until there are no more, and to accumulate and store the people in the "results" bit of each response body. I'm trying to do this with useState and useEffect hooks. Is there a common way of solving this problem that