react-hooks

问题 Hello I am trying to use a UseEffect of react hooks, I know I can add variables that on change can activate it, but I would like to know if there is a way to activate the useEffect only when the value meets certain criteria. I have already created a conditional inside the useEffect and I know it works, but I would like to know if there's another way to do it. useEffect(() => { doSomething(); if(!isOpen) doSomething2(); }, [isOpen, otherThing]); In the example above I want doSomething2 to work

问题 I'm using a functional component. I'm aware setColor changes the value of color asynchronously. However, my callback function doesn't receive the updated version of color (blue) even when it executes well after color has been updated. Here's an abstract version of my code: let [color, setColor] = useState("red"); useEffect(() => { setColor("blue"); setTimeout(() => { console.log(color); }, 5000) }, []); (here's a sandbox: https://codesandbox.io/s/falling-cherry-17ip2?file=/src/App.js) My only

问题 I'm trying to make one of those custom useKeyPress hooks, and I want my keydown handler to fire on every individual button press, i.e. holding down a key won't trigger it a million times. I'm trying to do this by having a flag that indicates whether to call the handler, callHandler - it should only be set to true when the target key is released/the component just mounted. Below is a simplified version of what I'm trying to do: const useKeyPress = (target)=>{ const [callHandler, setCallHandler

问题 I wanted to know if it is possible to have a functional class have a default call method. Let me elaborate. function Foo(){ /*some logic*/ Foo.prototype.aletUser = function alertUser(message) { alert(message); } } Assume that the code above is my functional class (if my naming for the above structure is wrong please tell me), and i instantiated one of this structure. let param = new Foo(); Now, i wish to call the following and hope for it to call my prototype Foo.alertUser param('Hey There')

问题 I'm building contact manager. When the user clicks the update button for a specific contact an action is dispatched and the "hotContact" property in the reducer's state is populated with an object. What I want is the fields of the ContactForm to be populated with the name and number of the "hotContact". However, despite the hotContact being loaded into the redux state my ContactForm component won't display the name and number of the hotContact. How can I proceed? This is what I have so far. I

问题 Assume you are using React and you are writing a custom hook useSomething that returns the identical same thing each time it is invoked for the same component. const something = useSomething() // useSomething() at time X === useSomething() at time Y If you now use this something value inside of a useEffect(() => ...) and you do not pass something as a dependency to the array of the second argument of useEffect then the linter will warn you: React Hook useEffect has a missing dependency:

问题 I have the following block of code: function foo({ bar, func }) { useEffect(() => { func(bar) }, [func, bar]) .... } Is this an anti pattern to include func within the dependencies list for React.useEffect ? I'm under the impression that the function definition for func almost never changes. Please correct me if I'm wrong. 回答1: This depends on the value of func that is obviously initialized in the parent component But assuming func is set to a constant function that will never change (which

问题 I have the following block of code: function foo({ bar, func }) { useEffect(() => { func(bar) }, [func, bar]) .... } Is this an anti pattern to include func within the dependencies list for React.useEffect ? I'm under the impression that the function definition for func almost never changes. Please correct me if I'm wrong. 回答1: This depends on the value of func that is obviously initialized in the parent component But assuming func is set to a constant function that will never change (which

问题 App.js: function App() { const [items, setItems] = useState([]); useEffect(() => { const searchDB = () => { fetch("http://127.0.0.1:8443/subColumns/5/?key=fc257229-8f91-4920-b71f-885403114b35", { mode: 'cors', credentials: 'include' }) .then(res => res.json()) .then((json) => { setItems(json); }) console.log({items}); } searchDB(); }, []) I need to keep the json response in a state varibale because in the future, the API request will nt be hard coded and I expect the user will make multiple

问题 I am trying to pass up the state "region" defined in my useState Hook to the parent element. Im not sure where to put the word region in order to do that though? This is the Child Element import React from 'react'; export default function SimpleMenu() { const [region, setRegion] = useState("Africa"); const filterRegion = (e) => { setRegion(e.target.value); }; return ( <div> <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}> Filter by Region </Button> <Menu>