react-hooks

问题 According to the documentation for the useState React Hook: If the new state is computed using the previous state, you can pass a function to setState . The function will receive the previous value, and return an updated value. So given const [count, setCount] = useState(initialCount); you can write setCount(prevCount => prevCount + 1); I understand the reason for using the updater function form with setState , as multiple calls may be batched. However During subsequent re-renders, the first

问题 I know we can replace query params in component based classes doing something along the lines of: componentDidMount() { const { location, replace } = this.props; const queryParams = new URLSearchParams(location.search); if (queryParams.has('error')) { this.setError( 'There was a problem.' ); queryParams.delete('error'); replace({ search: queryParams.toString(), }); } } Is there a way to do it with react hooks in a functional component? 回答1: Yes, you can use useHistory & useLocation hooks from

问题 I wrote a UI element as a function component which uses React's userReducer hook and it seems to run without errors. useReducer references a function I wrote (called, imaginatively, reducer ): const [state, dispatch] = React.useReducer(reducer, inputData, (inputData) => initialState(inputData)); There's state data which is input and output by the reducer function; and there are "managed" UI elements which depend on state , something like ... return ( <div> <div> {state.elements.map(getElement

问题 I've got the following use case in a React component. It is a search user input that uses React Autosuggest. Its value is always an ID, so I only have the user ID as a prop. Therefore at first load to show the username value, I need to fetch it at first mount. EDIT: I don't want to fetch the value again when it changes later, because I already have the value from my suggestions request. type InputUserProps = { userID?: string; onChange: (userID: string) => void; }; // Input User is a

问题 I've got the following use case in a React component. It is a search user input that uses React Autosuggest. Its value is always an ID, so I only have the user ID as a prop. Therefore at first load to show the username value, I need to fetch it at first mount. EDIT: I don't want to fetch the value again when it changes later, because I already have the value from my suggestions request. type InputUserProps = { userID?: string; onChange: (userID: string) => void; }; // Input User is a

问题 Inside of my useEffect, I have a props dependency (setIsValid). When I add this dependency to the useEffect, it lands in an infinite loop. Parent when Calling Child Component: const setIsValid = (bool) => { const tmpStateCopy = Object.assign({}, state); tmpStateCopy.isValid = bool; setState(tmpStateCopy); }; return <Child setIsValid={setIsValid} /> In the Child Component: const { setIsValid } = props; const [state, setState] = useState({ transformations: [], duplicateIndexes: [] }); const {

问题 While it is obvious why React does not perform React.memo to all its functional component by default, and we should ourself wrap our functional components as and when needed. In my case, I have a big react project with a structure like this: const MyBigApp = () => { const shouldShowX = useSelector(getShouldShowX); const shouldShowY = useSelector(getShouldShowY); // Many more selectors return ( <> {shouldShowX && <ComplexComponentX />} {shouldShowY && <ComplexComponentY />} {/* many more

问题 While it is obvious why React does not perform React.memo to all its functional component by default, and we should ourself wrap our functional components as and when needed. In my case, I have a big react project with a structure like this: const MyBigApp = () => { const shouldShowX = useSelector(getShouldShowX); const shouldShowY = useSelector(getShouldShowY); // Many more selectors return ( <> {shouldShowX && <ComplexComponentX />} {shouldShowY && <ComplexComponentY />} {/* many more

问题 I get this warning 'Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.' Code const [photo, setPhoto] = useState([]); useEffect(() => { fetch('/mypost', { headers: { cookie: 'access_token', }, }) .then((res) => res.json()) .then((data) => { setPhoto(data.mypost); }); }, []); The data is fetched but I could'nt figure what to add

问题 This is my state: const [markers, setMarkers] = useState([]) I initialise a Leaflet map in a useEffect hook. It has a click eventHandler. useEffect(() => { map.current = Leaflet.map('mapid').setView([46.378333, 13.836667], 12) . . . map.current.on('click', onMapClick) }, [] Inside that onMapClick I create a marker on the map and add it to the state: const onMapClick = useCallback((event) => { console.log('onMapClick markers', markers) const marker = Leaflet.marker(event.latlng, { draggable: