use-state

问题 import React, { useState} from "react"; import ReactDOM from "react-dom"; function App() { const [count, setCount] = useState(0); function handleAlertClick(){ return (setTimeout(() => { alert("You clicked on: " + count); }, 3000)) } return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> <button onClick={handleAlertClick}>Show alert</button> </div> ); } I just want to know if this works the way that I think it does, or if there is a better

问题 I am practicing React useState hooks to make a quiz timer that resets every ten seconds. What I have now is updating the state each second, and the p tag renders accordingly. But when I console.log(seconds) it shows 10 every time, and so the condition (seconds === 0) is never met . In Chrome's React DevTools, the state is updating accordingly as well. What am I doing wrong here? import React, {useState } from 'react'; function App() { const [seconds, setSeconds] = useState(10); const

问题 I am practicing React useState hooks to make a quiz timer that resets every ten seconds. What I have now is updating the state each second, and the p tag renders accordingly. But when I console.log(seconds) it shows 10 every time, and so the condition (seconds === 0) is never met . In Chrome's React DevTools, the state is updating accordingly as well. What am I doing wrong here? import React, {useState } from 'react'; function App() { const [seconds, setSeconds] = useState(10); const

问题 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:

问题 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:

问题 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:

问题 I have a functional component called (First) function First() { const [count,setCount]=useState(0) console.log("component first rendering") // this logging is happening twice return ( <div> first component </div> ) } when i initially run the application the console statement is logging twice why is it, It should have been logged only once, because i haven't explicitily updated the state. 回答1: I've tried this out in code sandbox here and sure enough, it did render twice. This is because, in

问题 I have a functional component called (First) function First() { const [count,setCount]=useState(0) console.log("component first rendering") // this logging is happening twice return ( <div> first component </div> ) } when i initially run the application the console statement is logging twice why is it, It should have been logged only once, because i haven't explicitily updated the state. 回答1: I've tried this out in code sandbox here and sure enough, it did render twice. This is because, in

问题 I have a form with two columns. The left column is a proposed value for the right column. I currently present both values from separate API calls. This is working. This is the current code: const dbContact = useDbContact(contact.Group); This sets the value of the current values, contact.Group from the proposed values being passed to the API call. I then later use this to call the form input value: <Form.Row> <Form.Group as={Col} controlId="currentSecName" className="mb-2"> <Form.Control type=

问题 I've stumbled upon an issue with the useState scope. I'm trying to create a dynamic Bootstrap Form where the user will be able to add more rows to the group (those rows will containt energy-related data). So, when I add 2+ rows and start changing inputs' values, enterEnvironmentData function fires empty data (last console.log). Where is my mistake? Why state data ( groupsData.group0.rows array ) is empty? const { useState, useEffect } = React; const App = () => { const [ defaultData, ] =