react-hooks

问题 This is my state: const [markers, setMarkers] = useState([]) I initialise a Leaflet map in a useEffect hook. It has a click eventHandler. useEffect(() => { map.current = Leaflet.map('mapid').setView([46.378333, 13.836667], 12) . . . map.current.on('click', onMapClick) }, [] Inside that onMapClick I create a marker on the map and add it to the state: const onMapClick = useCallback((event) => { console.log('onMapClick markers', markers) const marker = Leaflet.marker(event.latlng, { draggable:

问题 This is my state: const [markers, setMarkers] = useState([]) I initialise a Leaflet map in a useEffect hook. It has a click eventHandler. useEffect(() => { map.current = Leaflet.map('mapid').setView([46.378333, 13.836667], 12) . . . map.current.on('click', onMapClick) }, [] Inside that onMapClick I create a marker on the map and add it to the state: const onMapClick = useCallback((event) => { console.log('onMapClick markers', markers) const marker = Leaflet.marker(event.latlng, { draggable:

问题 Using React's useCallback hook is essentially just a wrapper around useMemo specialized for functions to avoid constantly creating new function instances within components' props. My question comes from when you need to pass an argued to the callback created from the memoization. For instance, a callback created like so... const Button: React.FunctionComponent = props => { const onClick = React.useCallback(() => alert('Clicked!'), []) return <button onClick={onClick}>{props.children}</button>

问题 I'm working with a deeply nested state object in React. My code base dictates that we try to stick with function components and so every time I want to update a key/value pair inside that nested object, I have to use a hook to set the state. I can't seem to get at the deeper nested items, though. I have a drop down menu w/ an onChange handler. . .inside the onChange handler is an inline function to directly setValue of whatever key/val pair is changing. The syntax I'm using after the spread

问题 Thanks in advance. I have a state array as below. I need to add an item to state array, I came across that we need not do state mutation. How do i set state with prevState. const [messages, setMessages] = React.useState( [ { _id: 12, createdAt: new Date(), text: 'All good', user: { _id: 1, name: 'Sian Pol', } }, { _id: 21, createdAt: "2019-11-10 22:21", text: 'Hello user', user: { _id: 2, name: 'User New' } }] ) How to to i call the set State to append this state array. Something like this?

问题 Thanks in advance. I have a state array as below. I need to add an item to state array, I came across that we need not do state mutation. How do i set state with prevState. const [messages, setMessages] = React.useState( [ { _id: 12, createdAt: new Date(), text: 'All good', user: { _id: 1, name: 'Sian Pol', } }, { _id: 21, createdAt: "2019-11-10 22:21", text: 'Hello user', user: { _id: 2, name: 'User New' } }] ) How to to i call the set State to append this state array. Something like this?

问题 I started using Hooks in React Native recently and I'm trying to get the data from Firebase Realtime Database and render it in FlatList. The data is being displayed on the console, in object format, but it is not working, it is not being rendered on the screen. What am I doing wrong? How do I make it work correctly? My code: import React, { useState, useEffect } from "react"; import { StyleSheet, View, Text, FlatList } from 'react-native'; import firebase from '@firebase/app'; import '

问题 I started using Hooks in React Native recently and I'm trying to get the data from Firebase Realtime Database and render it in FlatList. The data is being displayed on the console, in object format, but it is not working, it is not being rendered on the screen. What am I doing wrong? How do I make it work correctly? My code: import React, { useState, useEffect } from "react"; import { StyleSheet, View, Text, FlatList } from 'react-native'; import firebase from '@firebase/app'; import '

问题 I'd like to clarify my understanding of what's happening here. Any detail to improve my current understanding'd be appreciated. function Timer() { let [time, setTime] = useState(5); useEffect(() => { let timer = setInterval(() => { setTime(time - 1); }, 1000) return () => clearInterval(timer); }, ); return <div>{time}</div> } export default Timer https://codesandbox.io/s/cranky-chaplygin-g1r0p time is being initialised to 5 . useEffect is read. Its callback must be made ready to fire later.

问题 I'd like to clarify my understanding of what's happening here. Any detail to improve my current understanding'd be appreciated. function Timer() { let [time, setTime] = useState(5); useEffect(() => { let timer = setInterval(() => { setTime(time - 1); }, 1000) return () => clearInterval(timer); }, ); return <div>{time}</div> } export default Timer https://codesandbox.io/s/cranky-chaplygin-g1r0p time is being initialised to 5 . useEffect is read. Its callback must be made ready to fire later.