c10106

반응 후크 - 사용 중 상태상태() 경로가 변경될 때 재설정되지 않음 const Create = () => { console.log('rerender !!') const [parcelType, setParcelType] = useState('paper') console.log('parcelType =', parcelType) return ( setParcelType('plastic')}> Header ) } export default Create Create 구성 요소에서 Container를 클릭할 때 specType 상태를 'plastic'으로 변경하고, 경로가 변경될 때 specType 상태를 'paper'로 재설정(Create component rerender ).그러나 구성 요소 재렌더 상태가 종..

React with useCallback and useMemo의 재렌더 문제 나는 각각 다른 id(Speaker.js)를 가진 세 가지 구성요소를 렌더링하는 구성요소(Hello.js)의 꽤 간단한 예를 가지고 있다.나는 a를 가지고 있다.clickFunction내가 의장에게서 돌아갔다는 것을.React.memo와 React.useCallback을 사용하면 단 한 가지만 변경될 때 세 가지 모두 다시 렌더링하는 것을 막을 수 있다고 생각하지만, 안타깝게도 스피커의 콘솔.log에서 볼 수 있으며, 세 가지 버튼 중 하나를 클릭하면 세 가지 버튼이 모두 렌더링된다. 스택블리츠의 문제 예는 다음과 같다. https://stackblitz.com/edit/react-dmclqm 여보세요.js import Reac..

플랫리스트에서 react enative native의 모든 항목을 나열하지 않는가? 나는 시차 효과로 반응-원추-기차-두부 npm을 사용해 왔다.시차 안에서는 평면 리스트를 사용해 왔다. 매번 새로운 카테고리 플랫리스트를 추가할 때마다 API에서 가져온 항목을 다시 로드해야 하지만 내 경우에는 모든 항목이 나열되지 않는다.배열의 마지막 두 항목만 표시된다.나의 배열 값은 10개의 항목을 포함하지만 2개의 항목만 표시된다. 플랫리스트에 대한 코드: const renderContent = (label) => ( {this.state.categories && { return }} keyExtractor={(item) => item._id} />} ) 다음은 get 카테고리 목록 loadCategories = ..

useSelector with React.memo vs connect 링크에서 언급하는 것.https://react-redux.js.org/next/api/hooks#performance 내가 이해한 것의 이점은useSelector훅, 포장지 지옥을 피하기 위한 거야의 사용으로 인해 포장지 지옥이 일어나고 있다.connect HORK. 만약 우리가React.memo 임시:useSelector관능적인 이유로, 단순히 사용하는 것이 더 좋을까?connect 대신 HORK?왜냐하면 어떤 경우에도 우리는 지옥 같은 포장지에 들어가야 할 것이기 때문이다.만약 그게 아니라면connect그러면 옆에 있을 것이다.React.memo. 누구라도 이점에 대해 설명해 주시오.React.memo에 걸쳐서connect.음, 첫..

전달 인수에 대한 반응 후크에서 클릭 이벤트에 대한 구문 React class 구성 요소에서 이는 항상 나에게 큰 도움이 되었다. let myValue: string = "Hello World"; 나는 React Hooks 문서에서 이 구문을 찾았고 나는 그것을 좋아하지만 그것이 항상 값을 되돌려주지는 않는다. 이 구문은 작동하지만 타이핑이 어렵고 지저분해 보인다. handleClick(myValue)}> 이것은 갈고리와 함께 작동하는 또 다른 방법이지만, 나에게는 진부한 것처럼 보인다. 나는 너무 많은 선택으로 혼란스러워.이것을 하는 가장 좋은 방법만 있지 않은가?이 방법은 다음과 같다. handleClick(myValue)}> 유일한 단점은 다음과 같다.onClick프로펠러는 각 렌더에 새로운 값을 ..

반응 후크와 타이프스크립트를 사용하여 배열에서 개체를 푸시하는 방법 나는 이것이 완전히 잘못된 질문이라는 것을 알고 있고 미안하지만 나는 양식을 제출할 때 어떻게 오브젝트를 상태 배열로 넣어야 하는지 알아내려고 노력한다.감사합니다. interface newList { name: string; } const ListAdder = () => { const [listName, setListName] = useState(""); const [listArray, setListArray] = useState([]); const submitHandler = (e: FormEvent) => { e.preventDefault(); const myNewList: newList = { name: listName, }; se..

반응 재료-UI에서 사용가치를 설정할 수 없음 Material-UI에서 사용자 정의 대화 상자 구성 요소를 만든 경우 const CustomDialog = (props) => { const [dialogOpenState, setOpen] = React.useState(props.dilaogOpenProp); return ( {}} open={dialogOpenState} maxWidth="xs" sx={{ backdropFilter: "blur(5px)", }} > Example Dialog Example Content Here ooooh. ); } export default CustomDialog; 다른 컴포넌트로부터 오픈 클로즈(open close)를 관리하기 위해 이 작업을 수행하며useState ..

React Hooks API 호출 - inside useEffect? 리액션(후크 포함)을 배우고 있는데, 모든 API 호출이 useEffect 후크 안에 있어야 하는지 물어보고 싶었어. 내 시험 앱에는 다음과 같은 작업 패턴이 있다.상태를 설정한 다음 버튼을 클릭한 후, API에 get 요청을 보내고 블록에서 수신된 데이터를 주(州)에 추가하는 함수를 실행한다. 또한 useEffect 후크는 해당 상태가 변경될 때만 실행되며(상태 값이 있는 종속성 어레이 사용) 이전 상태의 새 데이터를 사용하여 ANTER 상태를 설정한다.그 두 번째 상태는 내 앱이 렌더 블록에서 렌더링하는 것이다. 이러한 방식으로 데이터 가져오기는 실제로 useEffect 자체가 아닌 버튼 클릭으로 실행되는 함수에서 이루어진다.효과가..

react useContext 를 사용하여 컨텍스트의 데이터를 동일한 구성 요소에서 표시하는 방법 리액션 마법사 구성 요소를 만들고 있으며, 컨텍스트를 사용하여 부모와 자식 간에 데이터를 전달하고 싶다. 그래서 마법사, 컨텍스트, 공급자, 사용자 지정 후크를 만들었는데 문제는 컨텍스트를 사용하려고 하면 마법사 구성 요소에 올바른 정보가 표시되지 않는다는 겁니다. (https://codesandbox.io/embed/wizardwitcontext-rfpui 참조) 사용자 지정 후크로 로그인을 전송할 수 있도록 마법사 자체의 컨텍스트 데이터에 의존하는 방법 wizard.js 사용: import React, { useContext, useEffect } from "react"; import { WizardCo..

반응 후크가 있는 두 번째 루프에서만 작동하는 루프용 나는 이 사이트와 비슷한 태그를 추가할 프로젝트가 있어.먼저 태그가 이미 사용자에 의해 선택되었는지 확인하고 싶다.추가된 태그가 이미 있는 태그와 동일한지 확인하기 위한 루프가 있다. 만약 내가 잭이라는 꼬리표를 만든다면, 그것은 잘 될 거야.만약 내가 잭이라는 이름의 태그를 하나 더 만들면, 나는 지금 두 개의 잭을 가지고 있다.세 번째 시도에서는 잭을 하나 더 추가하지 않는다(좋다). 여기 내 관련 코드가 있다.나는 또한 콘솔을 추가했다.My useState setTagAlready세 번째 시도까지는 무시되고 있는데, 두 번째 시도에서는 이 시도가 사실이어야 한다.내가 여기서 뭘 잘못하고 있는 거지? const [tagsFound, setTagsF..