Запитання з тегом «react-hooks»

Я переглядав документацію про гачки, коли натрапив useRef. Дивлячись на їх приклад ... function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); …

104 javascript  reactjs  react-hooks 

Який правильний спосіб оновлення стану - це вкладений об’єкт у React with Hooks? export Example = () => { const [exampleState, setExampleState] = useState( {masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b" fieldTwoTwo: "c" } } }) Як можна використовувати setExampleStateоновлення exampleStateдо a(додавання поля)? const a = { masterField: { …

103 javascript  reactjs  react-hooks 

Чи існують способи моделювання componentDidMountфункціональних компонентів React за допомогою гачків?

99 javascript  reactjs  react-hooks 

Відповідно до документів: componentDidUpdate()викликається відразу після оновлення. Цей метод не викликається для початкового візуалізації. Ми можемо використовувати новий useEffect()хук для імітації componentDidUpdate(), але, схоже useEffect(), запускається після кожного візуалізації, навіть у перший раз. Як змусити його не запускатись на початковому візуалізації? Як ви можете бачити в прикладі нижче, componentDidUpdateFunctionдрукується під …

95 javascript  reactjs  react-hooks 

Я очікую, що стан перезавантажиться при зміні реквізиту, але це не працює, а userзмінна не оновлюється під час наступного useStateдзвінка, що не так? function Avatar(props) { const [user, setUser] = React.useState({...props.user}); return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading...</p>); } codepen

95 reactjs  react-hooks 

Дозвольте мені пояснити результат цього коду за те, що я легко поставив своє питання. const ForExample = () => { const [name, setName] = useState(''); const [username, setUsername] = useState(''); useEffect(() => { console.log('effect'); console.log({ name, username }); return () => { console.log('cleaned up'); console.log({ name, username }); }; }, …

94 reactjs  react-hooks 

Я мігрую проект React з проектом TypeScript, щоб використовувати функції хуків (React v16.7.0-alpha), але я не можу зрозуміти, як встановити типізацію деструктурованих елементів. Ось приклад: interface IUser { name: string; } ... const [user, setUser] = useState({name: 'Jon'}); Я хочу змусити userзмінну мати тип IUser. Єдиним моїм успішним випробуванням є …

89 reactjs  typescript  react-hooks 

Я отримую цю помилку під час використання useStateгачка. Я маю це в базовій формі, дивлячись на реакційні документи для посилання, але все ще отримую цю помилку. Я готовий до моменту долоні обличчя ... export function Header() { const [count, setCount] = useState(0) return <span>header</span> }

78 javascript  reactjs  react-hooks 

Стандартний спосіб використання React useState Hook полягає в наступному: const [count, setCount] = useState(0); Однак ця const countзмінна, очевидно, буде перенесена на інше примітивне значення. Чому тоді змінна не визначається як let count?

33 javascript  reactjs  ecmascript-6  react-hooks 

Ось проблема: я намагаюся викликати дві функції при натисканні кнопки. Обидві функції оновлюють стан (я використовую гачок useState). Перша функція правильно поновлює value1 на 'new 1', але після 1s (setTimeout) друга функція запускається, і вона змінює значення 2 на 'new 2', АЛЕ! Він встановлює значення1 назад до '1'. Чому це …

31 javascript  reactjs  react-hooks 

Я намагаюся розібратися, як використовувати слухач Firebase, щоб дані хмарного firestore були оновлені оновленнями реактивних гаків. Спочатку я робив це, використовуючи компонент класу з функцією компонентDidMount, щоб отримати дані firestore. this.props.firebase.db .collection('users') // .doc(this.props.firebase.db.collection('users').doc(this.props.firebase.authUser.uid)) .doc(this.props.firebase.db.collection('users').doc(this.props.authUser.uid)) .get() .then(doc => { this.setState({ name: doc.data().name }); // loading: false, }); } Це руйнується, …

27 javascript  reactjs  firebase  google-cloud-firestore  react-hooks 

Я використовую новий користувальний історичний гак React Router, який вийшов кілька тижнів тому. Моя версія React-маршрутизатора - 5.1.2. Мій Реакція знаходиться у версії 16.10.1. Ви можете знайти мій код внизу. Однак, коли я імпортую нове useHistory від react-router, я отримую цю помилку: Uncaught TypeError: Cannot read property 'history' of undefined …

18 reactjs  react-router  react-hooks  react-router-dom  react-context 

Реактивні гачки дають нам параметр useState, і я завжди бачу порівняння Hooks та Class-State. А як же гачки та деякі регулярні змінні? Наприклад, function Foo() { let a = 0; a = 1; return <div>{a}</div>; } Я не використовував Гачки, і це дасть мені ті ж результати, що і: function …

12 javascript  node.js  reactjs  react-hooks 

Я роблю користувацький гачок, у якого є занадто вуглець, коли зміниться стан. Ви повинні мати можливість передавати будь-який стан у масиві. import { useState, useEffect } from 'react' const useFlatListUpdate = (dependencies = []) => { const [toggle, setToggle] = useState(false) useEffect(() => { setToggle(t => !t) }, [...dependencies]) return …

10 reactjs  react-native  eslint  react-hooks 

коли в середовищі розробки, моя програма працює просто чудово. Коли у виробничому середовищі він виходить з ладу: Uncaught TypeError: (0 , _react.useEffect) is not a function Це трапляється у файлі, який я створив, куди імпортую React та useEffect так: import React, { useEffect } from 'react' const X = () …

10 javascript  reactjs  react-hooks  parceljs