react-hooks

问题 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]; };

问题 I'm newbie in React but I'm developing an app which loads some data from the server when user open the app. App.js render this AllEvents.js component: const AllEvents = function ({ id, go, fetchedUser }) { const [popout, setPopout] = useState(<ScreenSpinner className="preloader" size="large" />) const [events, setEvents] = useState([]) const [searchQuery, setSearchQuery] = useState('') const [pageNumber, setPageNumber] = useState(1) useEvents(setEvents, setPopout) // get events on the main

问题 I have an object which i want to update it using React Hooks const [rowEdit, setRowEdit] = useState({ rowEdit: { "1x0": [1, 1, 1, 1, 1] } }); I loop through the array with .map, so i have the index for each element. How can i make the second value equal to 0? 回答1: You can return 0 if the map index is equal to 1 , or return the current element otherwise. Example const { useState } = React; function App() { const [rowEdit, setRowEdit] = useState({ rowEdit: { "1x0": [1, 1, 1, 1, 1] } });

问题 I have an object which i want to update it using React Hooks const [rowEdit, setRowEdit] = useState({ rowEdit: { "1x0": [1, 1, 1, 1, 1] } }); I loop through the array with .map, so i have the index for each element. How can i make the second value equal to 0? 回答1: You can return 0 if the map index is equal to 1 , or return the current element otherwise. Example const { useState } = React; function App() { const [rowEdit, setRowEdit] = useState({ rowEdit: { "1x0": [1, 1, 1, 1, 1] } });

问题 I m having one child component which is inside a loop of parent component. when one of the child components is updating the state of parent component, it is re-rendering the all children since it is loop. How can i avoid the re-render for each iteration. function Parent() { const [selectedChild, setSelectedChild] = useState([]); const onChangeHandle = (event, id) => { const checked = event.target.checked; let updatedArray = [...selectedChild]; if(checked){ if(!selectedChild.includes(id)){

问题 I m having one child component which is inside a loop of parent component. when one of the child components is updating the state of parent component, it is re-rendering the all children since it is loop. How can i avoid the re-render for each iteration. function Parent() { const [selectedChild, setSelectedChild] = useState([]); const onChangeHandle = (event, id) => { const checked = event.target.checked; let updatedArray = [...selectedChild]; if(checked){ if(!selectedChild.includes(id)){

问题 I have a hook that listens to the window.resize event. I wish to only listen to and update when window.innerWidth changes. I wish to ignore changes to window.innerHeight since this gets triggered when opening the soft keyboard. The problem is that the mediaSize is stored in my Redux Store causing the app to re-render when the soft keyboard opens. My code triggers on both window.innerWidth and window.innerHeight changes, how can I change this behaviour? My hook import { useState, useEffect }

问题 I'm using React hooks + firebase. In firebase, I created a collection called "projects" When I try to console log the data with: const Dashboard = () => { const { firebase } = useContext(GlobalContext); return ( <div className="container"> {console.log(firebase.db.collection("projects"))} </div> ); }; I'm getting the following object: Shouldn't be able to see my data? Below are my firebase and context set up firebase.js import app from "firebase/app"; import "firebase/auth"; import "firebase

问题 I have a form with 30 fields and all those fields are a template from a value in a dropdown, if I change the value of the template I will end up creating a custom template. So the action is: When we are changing a value from the form, the template will change in custom template As you can see there are some logic that come up and down and I'm worried about the multiple setState declaration and call. Should I use useReducer or useState ? 回答1: From the useReducer documentation: useReducer is