react-hooks

问题 I am currently playing around with the new React Hooks feature, and I have run into an issue where the state of a functional component is not being updated even though I believe I am doing everything correctly, another pair of eyes on this test app would be much appreciated. import React, { useState, useEffect } from 'react'; const TodoList = () => { let updatedList = useTodoListState({ title: "task3", completed: false }); const renderList = () => { return ( <div> { updatedList.map((item) =>

问题 As a newbie in JS world i am in a big trouble ... I am using a react hook import { useKeycloak } from '@react-keycloak/web'; import { useCallback } from 'react'; export const useAuthenticatedCallback = (callbackFn) => { const [keycloak, initialized] = useKeycloak() const authCallback = useCallback(() => { // Do nothing while Keycloak is initializing if (!initialized) { return } // if user is not authenticated redirect to login if (!keycloak.authenticated) { return keycloak.login() } //

问题 i have an issue in my react app and i dont know how to solve it; i have an array with values and chosen list and a function to add item to the chosen list import React, { useState } from "react"; import Parent from "./Parent"; export default function App() { const [chosenList, setChosenList] = useState([]); const array = ["dsadas", "dasdas", "dasdasd"]; const addToChosenList = string => { setChosenList([...chosenList, string]); }; return ( <div className="App"> <Parent arr={array} chosenList=

问题 As a newbie in JS world i am in a big trouble ... I am using a react hook import { useKeycloak } from '@react-keycloak/web'; import { useCallback } from 'react'; export const useAuthenticatedCallback = (callbackFn) => { const [keycloak, initialized] = useKeycloak() const authCallback = useCallback(() => { // Do nothing while Keycloak is initializing if (!initialized) { return } // if user is not authenticated redirect to login if (!keycloak.authenticated) { return keycloak.login() } //

问题 This is part of a larger component but I've summarised it in a reproducible example below: import React, {useState} from 'react' function App() { const [data,setData] = useState([{name:'first'},{name:'second'},{name:'three'}]) // Function to reverse a given array const reverseArray = (array) => { var reverseArray = array.reverse(); return reverseArray; } return ( <div> {data.map((item,index)=>{ return <h1 key={index}>{item.name} index: {index}</h1> })} {/*When I click this I expect the div

问题 How to change this class base Context API to reach Hook without changing other components that already consumed it? I am new to react and spend all night and I got stuck. The actual code is more than this but I'm trying to remove some of the code for simplicity purposes: import React, { createContext, Component } from 'react' const MainContext = createContext(); class MainContextProvider extends Component { state = { isLogin : false, loginData : [], spinner : false } handleUserLogin = (res) =

问题 I'm trying to write a React functional component that requests a list of people exposed across multiple pages in an API: https://swapi.dev/api/people/?page=9 I know there are currently nine pages, but this might change in the future, so I want my component to keep requesting pages until there are no more, and to accumulate and store the people in the "results" bit of each response body. I'm trying to do this with useState and useEffect hooks. Is there a common way of solving this problem that

问题 My question is almost the same as this one. In this case, the person has a map of states created in a hard coded way: const App = props => { const [state, changeState] = useState({ name: "", eventTitle: "", details: "", list: "", toggleIndex: "", editName: "", editEventTitle: "", editDetails: "", }); The difference is that I want to create those states dynamically, receiving them from another component. I tried something like this but it obviously did not work: const App = props => { const

问题 Consider this basic form fields component with a custom form hook to handle input changes: import React, { useState, useCallback } from 'react'; const useFormInputs = (initialState = {})=> { const [values, setValues] = useState(initialState); const handleChange = useCallback(({ target: { name, value } }) => { setValues(prev => ({ ...prev, [name]: value })); }, []); const resetFields = useCallback(() => setValues(initialState), [initialState]); return [values, handleChange, resetFields]; };

问题 Consider this basic form fields component with a custom form hook to handle input changes: import React, { useState, useCallback } from 'react'; const useFormInputs = (initialState = {})=> { const [values, setValues] = useState(initialState); const handleChange = useCallback(({ target: { name, value } }) => { setValues(prev => ({ ...prev, [name]: value })); }, []); const resetFields = useCallback(() => setValues(initialState), [initialState]); return [values, handleChange, resetFields]; };