«react-hooks» 태그된 질문

React 16.7-alpha에서 새로운 후크 시스템을 가지고 놀았고 내가 처리중인 상태가 객체 또는 배열 일 때 useEffect에서 무한 루프에 갇혀 있습니다. 먼저 useState를 사용하고 다음과 같은 빈 개체로 시작합니다. const [obj, setObj] = useState({}); 그런 다음 useEffect에서 setObj를 사용하여 다시 빈 개체로 설정합니다. 두 번째 인수로 객체 의 내용 이 변경되지 …

115 reactjs  react-hooks 

저는 새로운 React Hooks를 시험 해보고 있으며 매초마다 증가해야하는 카운터가있는 Clock 구성 요소를 가지고 있습니다. 그러나 값은 1 이상으로 증가하지 않습니다. function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(time + 1); }, 1000); return () => { window.clearInterval(timer); }; }, …

109 javascript  reactjs  react-hooks 

props 변경시 상태가 다시로드 될 것으로 예상하지만 이것이 작동하지 않고 user다음 useState호출에서 변수가 업데이트되지 않습니다 . 무엇이 잘못 되었습니까? function Avatar(props) { const [user, setUser] = React.useState({...props.user}); return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading...</p>); } 코드 펜

109 reactjs  react-hooks 

componentDidMount후크를 통해 React 기능 구성 요소에서 시뮬레이션하는 방법이 있습니까?

108 javascript  reactjs  react-hooks 

문서에 따르면 : componentDidUpdate()업데이트가 발생한 직후에 호출됩니다. 이 메서드는 초기 렌더링에는 호출되지 않습니다. 새로운 useEffect()후크를 사용하여 를 시뮬레이션 할 수 componentDidUpdate()있지만 useEffect()처음으로도 렌더링 할 때마다 실행되는 것처럼 보입니다 . 초기 렌더링에서 실행되지 않도록하려면 어떻게합니까? 아래 예에서 볼 수 있듯이 componentDidUpdateFunction는 초기 렌더링 componentDidUpdateClass중에 인쇄 되지만 초기 렌더링 중에 인쇄되지 않았습니다. …

106 javascript  reactjs  react-hooks 

후크 기능 (React v16.7.0-alpha)을 사용하기 위해 React with TypeScript 프로젝트를 마이그레이션하고 있지만 구조화 요소의 입력을 설정하는 방법을 알 수 없습니다. 다음은 그 예입니다. interface IUser { name: string; } ... const [user, setUser] = useState({name: 'Jon'}); user변수 유형 을 강제하고 싶습니다 IUser. 내 유일한 성공적인 평가판은 두 단계로 수행하는 것입니다. …

90 reactjs  typescript  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 }); }; }, [username]); const handleName = e => …

84 reactjs  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 

문제가 있습니다 : 버튼 클릭으로 2 개의 함수를 호출하려고합니다. 두 함수 모두 상태를 업데이트합니다 (useState 후크를 사용하고 있습니다). 첫 번째 함수는 value1을 'new 1'로 올바르게 업데이트하지만 1s (setTimeout) 후에 두 번째 함수가 실행되고 값 2가 'new 2'로 변경되지만 BUT! value1을 다시 '1'로 설정했습니다. 왜 이런 일이 발생합니까? 미리 감사드립니다! import …

31 javascript  reactjs  react-hooks 

Firebase 리스너를 사용하여 클라우드 Firestore 데이터가 반응 후크 업데이트로 새로 고쳐지는 방법을 알아 내려고합니다. 처음에는 componentDidMount 함수와 함께 클래스 구성 요소를 사용하여 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의 새로운 useHistory 후크를 사용하고 있습니다. 내 React-router 버전은 5.1.2입니다. 내 반응은 버전 16.10.1입니다. 하단에서 내 코드를 찾을 수 있습니다. 그러나 반응 라우터에서 새 useHistory를 가져올 때 다음 오류가 발생합니다. Uncaught TypeError: Cannot read property 'history' of undefined 이것은 React-router 에서이 줄로 인해 발생합니다 function …

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

반응 후크는 우리에게 useState 옵션을 제공하며 항상 후크 대 클래스 상태 비교를 봅니다. 그러나 후크와 일부 정규 변수는 어떻습니까? 예를 들어 function Foo() { let a = 0; a = 1; return <div>{a}</div>; } 나는 Hooks를 사용하지 않았으며 다음과 같은 결과를 얻을 것이다. function Foo() { const [a, setA] = …

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 toggle } export default useFlatListUpdate 그리고 …

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 = () => { useEffect(() => { ... }) ... } …

9 javascript  reactjs  react-hooks  parceljs