react-hooks

问题 I am fetching data from backend using axios whenever I am trying to update hooks it is not updating. The data is JSON from where I am extracting data and trying to set element. It might sound silly but can somebody tell me what is dependent array? I keep getting this Line 18: React Hook useEffect has a missing dependency: 'elements'. Either include it or remove the dependency array react-hooks/exhaustive-deps Here is code import React, { useEffect, useState } from 'react'; import './App.css';

问题 I have this specific need to listen to a custom event in the browser and from there, I have a button that will open a popup window. I'm currently using React Portal to open this other window (PopupWindow), but when I use hooks inside it doesn't work - but works if I use classes. By working I mean, when the window opens, both shows the div below it but the one with hooks erases it when the data from the event refreshes. To test, leave the window open for at least 5 seconds. I have an example

问题 I have this specific need to listen to a custom event in the browser and from there, I have a button that will open a popup window. I'm currently using React Portal to open this other window (PopupWindow), but when I use hooks inside it doesn't work - but works if I use classes. By working I mean, when the window opens, both shows the div below it but the one with hooks erases it when the data from the event refreshes. To test, leave the window open for at least 5 seconds. I have an example

问题 I have the following react component function ConferencingRoom() { const [participants, setParticipants] = useState({}) console.log('Participants -> ', participants) useEffect(() => { // messages handlers socket.on('message', message => { console.log('Message received: ' + message.event) switch (message.event) { case 'newParticipantArrived': receiveVideo(message.userid, message.username) break case 'existingParticipants': onExistingParticipants( message.userid, message.existingUsers ) break

问题 Error Uncaught TypeError: Object(...) is not a function import { useSelector, useDispatch, useRef } from 'react-redux' const mounted = useRef(); useEffect(() => { console.log('mounted', mounted) console.log('useEffect props:', props) I have a functional component and trying to take advantage of hooks to use componentDidUpdate, in my onSubmit function I fire a dispatch to call and API, and I need to see what is the resulting payload of that API, which is stored in redux. But I get the error

问题 I'm trying to get all snapshot on my LayoutDummy.js to complete my unit test coverage when I Run Test I got error, it says dummyFunc is not a function like below I have wrote my actual code in functional component and testing file like this LayoutDummy.js import React, { useEffect, useState } from 'react'; const LayoutDummy = () => { const [caption, setCaption] = useState('loading...'); useEffect(() => { dummyFunc(); }, []); const dummyFunc = () => { setCaption('dummyFunc is running'); };

问题 I want to test a function that fetch something from server, it looks like this : import React, { useEffect } from 'react'; function Component1() { useEffect(() => { fetchSomeData(); }, []) const fetchSomeData = async () =>{ console.log('fetchSomeData') } return <div>Component1</div>; } export default Component1; and test file: import React from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { act } from 'react-dom/test-utils'; import Enzyme, { shallow } from

问题 I want to test a function that fetch something from server, it looks like this : import React, { useEffect } from 'react'; function Component1() { useEffect(() => { fetchSomeData(); }, []) const fetchSomeData = async () =>{ console.log('fetchSomeData') } return <div>Component1</div>; } export default Component1; and test file: import React from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { act } from 'react-dom/test-utils'; import Enzyme, { shallow } from

问题 Suppose I implement a simple global loading state like this: // hooks/useLoading.js import React, { createContext, useContext, useReducer } from 'react'; const Context = createContext(); const { Provider } = Context; const initialState = { isLoading: false, }; function reducer(state, action) { switch (action.type) { case 'SET_LOADING_ON': { return { ...state, isLoading: true, }; } case 'SET_LOADING_OFF': { return { ...state, isLoading: false, }; } } } export const actionCreators = {

问题 Suppose I implement a simple global loading state like this: // hooks/useLoading.js import React, { createContext, useContext, useReducer } from 'react'; const Context = createContext(); const { Provider } = Context; const initialState = { isLoading: false, }; function reducer(state, action) { switch (action.type) { case 'SET_LOADING_ON': { return { ...state, isLoading: true, }; } case 'SET_LOADING_OFF': { return { ...state, isLoading: false, }; } } } export const actionCreators = {