react-hooks

问题 I am finding that I am reusing behaviour across an app that when a user clicks outside an element I can hide it. With the introduction of hooks is this something I could put in a hook and share across components to save me writing the same logic in every component? I have implemented it once in a component as follows. const Dropdown = () => { const [isDropdownVisible, setIsDropdownVisible] = useState(false); const wrapperRef = useRef<HTMLDivElement>(null); const handleHideDropdown = (event:

问题 I am finding that I am reusing behaviour across an app that when a user clicks outside an element I can hide it. With the introduction of hooks is this something I could put in a hook and share across components to save me writing the same logic in every component? I have implemented it once in a component as follows. const Dropdown = () => { const [isDropdownVisible, setIsDropdownVisible] = useState(false); const wrapperRef = useRef<HTMLDivElement>(null); const handleHideDropdown = (event:

问题 I am trying to create a loading component that will add a period to a div periodically, every 1000ms using setInterval in React. I am trying to cleanup setInterval using the method described in the docs. https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1 import React, { useEffect, useState } from 'react' const Loading = () => { const [loadingStatus, setLoadingStatus] = useState('.') const [loop, setLoop] = useState() useEffect(() => { setLoop(setInterval(() => { console.log(

问题 I am trying to create a loading component that will add a period to a div periodically, every 1000ms using setInterval in React. I am trying to cleanup setInterval using the method described in the docs. https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1 import React, { useEffect, useState } from 'react' const Loading = () => { const [loadingStatus, setLoadingStatus] = useState('.') const [loop, setLoop] = useState() useEffect(() => { setLoop(setInterval(() => { console.log(

问题 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, ] =

问题 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, ] =

问题 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, ] =

问题 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, ] =

问题 Let's say my component has a piece of state that is a set of selected IDs. Javascript has a Set type, so I try this: let [selectedIDs, setSelectedIDs] = useState(new Set()); The Javascript Set is itself mutable, so I'm confused. function toggleSelectedID(id) { let set = selectedIDs; if (set.has(id)) { set.delete(id) } else { set.add(id) } // ??? setSelectedIDs(set); } If the Set objects where immutable, I would create a new Set with the added or removed element, and pass that new Set to

问题 UPDATE: Yes for use case 1, if I extract search.value outside the useEffect and use it as a dependency it works. But I have an updated Use case below Use Case 2 : I want to pass a searchHits Object to the server. The server in turn return it back to me with an updated value in response. If I try using the searchHits Object I still get the infinite loop state: { visible: true, loading: false, search: { value: “”, searchHits: {....}, highlight: false, } } let val = search.value let hits =