react-hooks

问题 I want to run an interval with a delay for the first time it fires. How can I do this with useEffect? Because of the syntax I've found it difficult to achieve what I want to do The interval function useEffect(()=>{ const timer = setInterval(() => { //do something here return ()=> clearInterval(timer) }, 1000); },[/*dependency*/]) The delay function useEffect(() => { setTimeout(() => { //I want to run the interval here, but it will only run once //because of no dependencies. If i populate the

问题 I am using Highcharts React wrapper in an app using Hooks, when my chart is either loaded or zoomed it fires both setExtremes and setAfterExtremes multiple times each. I've looked through for similar questions but they are related to different issues. I've reduced the code to the minimum setup, the page is not refreshing, the data is only parsed once and added to the chart once yet, animation is disabled and it's still consistently firing both events 7 times on: * initial population * on zoom

问题 I am using Highcharts React wrapper in an app using Hooks, when my chart is either loaded or zoomed it fires both setExtremes and setAfterExtremes multiple times each. I've looked through for similar questions but they are related to different issues. I've reduced the code to the minimum setup, the page is not refreshing, the data is only parsed once and added to the chart once yet, animation is disabled and it's still consistently firing both events 7 times on: * initial population * on zoom

问题 I am learning how to use React and started using classes and decided to swap over to using Hooks. I believe that I have everything mapped out correctly, however I am very uncertain of how to structure my axios.post with useEffect to handle multiple user inputs. import React, { useState, useEffect } from 'react' import axios from 'axios' const Signup = () => { const [customerSignUp, setCustomerSignUp] = useState([ { email: '', password: '', firstName: '', lastName: ''} ]); const handleChange =

问题 I need to do a fetch API call that returns a URL, do something with the returned URL, then refresh the URL after 60 seconds. This is something I could comfortably achieve without hooks, but I'd like a hooks solution. IMPORTANT : I'm not looking to refactor this to multiple components, or create custom hooks for either the timer or API call. EDIT : The question is - is this the correct way to handle a timer in a hooks environment? Is there a better way? import React, { useState, useEffect }

问题 I'm implementing authentication into my app, the issue I am having is on refresh the state is not persistent so I get redirected back to the login screen. How can I use React Hooks to check if there is an authToken in local storage to keep me logged in on refresh. This is My Protected Route That checks for auth tokens <Route {...rest} render={ props=> authTokens ? ( <Component {...props}/> ) : ( <Redirect to ={ { pathname: '/login', state: { from: props.location } } } /> This is my Login page

问题 I've been using hooks for a while and I never fully understand why React is forcing me to includes some dependencies that I don't want on my useEffect. The way I understand the 'dependencies' of a useEffect hook Add the values you want to 'listen' whenever they change and trigger your effect. This works perfectly with a simple effect like: import React, {useEffect, useState} from "react"; interface Props { id: string } const SimpleComponent = (props: Props) => { const {id} = props; const

问题 I'm using the stateless functional component to add spinner while image is loading from the external resource, like so: function ExternalImage(props) { const [loaded, setLoaded] = useState(false); function onLoad() { console.log('loaded'); setLoaded(true); } return loaded ? <img onLoad={onLoad} src={props.src} alt={props.alt} {...props} /> : <Spin /> } And use it like so: <ExternalImage src={image.src} alt={image.alt} className="image" /> Why would the onLoad never get called? 回答1: When image

问题 I'm using the stateless functional component to add spinner while image is loading from the external resource, like so: function ExternalImage(props) { const [loaded, setLoaded] = useState(false); function onLoad() { console.log('loaded'); setLoaded(true); } return loaded ? <img onLoad={onLoad} src={props.src} alt={props.alt} {...props} /> : <Spin /> } And use it like so: <ExternalImage src={image.src} alt={image.alt} className="image" /> Why would the onLoad never get called? 回答1: When image

问题 This problem occurs only if the state value was actually changed due to the previous update. In the following example, when the button is clicked for the first time, "setState" is called with a new value (of 12), and a component update occurs, which is understandable. When I click the same button for the second time, setting the state to the same value of 12 it causes the component to re-run (re-render), and why exactly that happens is my main question. Any subsequent setStates to the same