react-hooks

问题 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 = {

问题 In create-react-app, I'm trying to simple test with jest but I'm getting this error : TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined. A part of my component AppBarUser.js /... const AppBarUser = () => { const classes = useStyles(); const [, formDispatch] = useContext(FormContext); const [t] = useContext(TranslationContext); const [openDrawer, setDrawer] = useState(false); const [userInfos, setData] = useState({}); useEffect(() => { const fetchData = async () => { try {

问题 In create-react-app, I'm trying to simple test with jest but I'm getting this error : TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined. A part of my component AppBarUser.js /... const AppBarUser = () => { const classes = useStyles(); const [, formDispatch] = useContext(FormContext); const [t] = useContext(TranslationContext); const [openDrawer, setDrawer] = useState(false); const [userInfos, setData] = useState({}); useEffect(() => { const fetchData = async () => { try {

问题 The parent component contains an array of objects. It maps over the array and returns a child component for every object, populating it with the info of that object. Inside each child component there is an input field that I'm hoping will allow the user to update the object, but I can't figure out how to go about doing that. Between the hooks, props, and object immutability, I'm lost conceptually. Here's a simplified version of the parent component: const Parent = () => { const [categories,

问题 I make an API call. It appears React goes ahead to build a table without the data, thus throwing error of Uncaught TypeError: Cannot read property 'map' of undefined Here's what I'm doing useEffect() pretty straightforward const [data, setData] = useState(); const [isBusy, setBusy] = useState() useEffect(() => { setBusy(true); async function fetchData() { const url = `${ process.env.REACT_APP_API_BASE }/api/v1/endpoint/`; axios.get(url).then((response: any) => { setBusy(false); setData

问题 I have two issues first how do I add/update the JSON items within a hook? The other being that React won't let me use the name stored from a previous JSON file. I am open to other solutions, basically, as my input field are dynamically generated from a JSON file I'm unsure of the best way to store or access the data that's input into them I think storing them in a react hook as JSON and then passing them though as props to another component is probably best. What I want to happen is onChange

问题 I'm trying to create a simple component to dispatch an action using the React Redux hook useDispatch - and I'm getting an error. I've trimmed the component down to where the error occurs. It happens when the useDispatch function is called. import { useDispatch } from 'react-redux' const MyComp = () => { useDispatch() return null } export default MyComp This is the error I'm seeing in dev console: Uncaught TypeError: Object(...) is not a function at MyComp (MyComp.js?cc4c:4) at renderWithHooks

问题 I'm trying to create a simple component to dispatch an action using the React Redux hook useDispatch - and I'm getting an error. I've trimmed the component down to where the error occurs. It happens when the useDispatch function is called. import { useDispatch } from 'react-redux' const MyComp = () => { useDispatch() return null } export default MyComp This is the error I'm seeing in dev console: Uncaught TypeError: Object(...) is not a function at MyComp (MyComp.js?cc4c:4) at renderWithHooks

问题 Ran into a problem with hooks today. I know there is a similar post, and I read the rules of using hooks. Right now when I post my form, it gives me that error. And I know that's because my hook is INSIDE an if statement. But how can I get it out? I don't know how else to use this hook if it's not in a function or a statement. Any advice would be greatly appreciated. Here is the code: import React, { FunctionComponent, useState, useEffect } from 'react'; import usePost from '../hooks/usepost'

问题 Ran into a problem with hooks today. I know there is a similar post, and I read the rules of using hooks. Right now when I post my form, it gives me that error. And I know that's because my hook is INSIDE an if statement. But how can I get it out? I don't know how else to use this hook if it's not in a function or a statement. Any advice would be greatly appreciated. Here is the code: import React, { FunctionComponent, useState, useEffect } from 'react'; import usePost from '../hooks/usepost'