prostudy

반응 사용비동기 대기 결과에 따라 효과 정리 기능이 달라짐 나는 일부 자원을 비동기적으로 얻은 다음 자원 변경에 가입하는 반응 구성요소를 가지고 있다. 문제는 정리 기능이 이 자원의 폐쇄에 있지 않다는 점이다. useEffect(() => { const onResourceChange = () => { console.log('resource changed'); }; getSomeResource().then(resource => { resource.subscribe(onResourceChange); }); return () => { resource.unsubscribe(onResourceChange); // Error! resource is undefined } }, []); 다음에서 비동기 함수를 사용한 ..

Typecript에서 작성한 사용자 정의 React 후크를 npm에 게시하려면 어떻게 해야 하는가? Typecript에서 Reaction 후크를 작성했으며 npm에 게시하려고 하는데 빌드 구성을 올바르게 설정할 수 없는 것 같아.다른 빌드 툴은 사용하지 않는다.tsc나는 Typecript 문서, React 문서 및 몇 개의 블로그 게시물에 있는 추천서를 읽었다. 빌드하고 게시할 때 오류가 발생하지 않지만 다른 프로젝트에서 모듈을 가져오려고 하면 리액션을 가져오는 동안 오류가 발생함하지만 내가 준비한 모든 것은react~이어야 한다peerDependency사용자 정의 후크를 게시할 때 '에서 'reaction' 모듈을 찾을 수 없음../useMyHook/build/index.js' tsc:v4.1.3 반응..

useFooController/useFooHook을 통해 useContext를 사용하는 구성 요소의 렌더 제한 구성요소에 사용자 정의 후크를 사용하고 있으며 사용자 정의 후크는 사용자 정의 컨텍스트를 사용한다.고려하다 /* assume FooContext has { state: FooState, dispatch: () => any } */ const useFoo = () => { const { state, dispatch } = useContext(FooContextContext) return {apiCallable : () => apiCall(state) } } const Foo = () => { const { apiCallable } = useFoo() return ( ) } 많은 구성 요소가 변경될..

TinyMCE 리액션 커서 키 입력 후 다시 시작 TinyMCE-React를 사용하고 있는데 TinyMCE Editor에 초기 값으로 텍스트를 입력하면 텍스트 시작 시 커서가 계속 반환되고... import { Editor } from "@tinymce/tinymce-react"; const [formData, setFormData] = useState({ title: "", text: "", }); if (post) { setFormData((formData) => ({ ...formData, title: post.title, text: post.text, })); } const { title, text } = formData; 내 기능: const textChange = (e) => { setForm..

API 호출을 위해 해당 상태가 즉시 필요한 useState 후크를 사용할 때 setState 호출을 기다리는 방법 나는 음성 받아쓰기 사용자 지정 후크와 함께 "Note" 값을 저장하는 개체에 받아쓰기 결과를 추가하는 별도의 사용자 지정 후크를 가지고 있다. 사용자가 너무 일찍 저장을 클릭해도 노트를 저장하는 API 호출 직전에 추가해야 하는 부분 결과가 있다. 내 코드는 이렇게 생겼어. function NoteDictation(props) { const [ results, partialResults, error, toggleRecognizing, speechHasStarted, ] = useDictation(); const [note, setNote, saveNoteAPICall, updateNote..

상위 상태가 변경될 때 구성 요소가 마운트 해제됨 React 16.8.2를 사용하고 있는데 앱 구성 요소 상태가 변경될 때마다 구성 요소의 자녀가 마운트 해제되는 문제가 발생함 시나리오는 다음과 같다. 여러 상태 변수가 있는 App.jsx(기능 구성요소)가 있음(useState) 이러한 상태 변수 중 일부에 대한 세터는 컨텍스트 제공자를 통해 트리 아래로 전달된다(하위부의 컨텍스트 사용) 이러한 세터를 호출하는 메뉴 구성 요소(예: 모달 대화 상자 표시)가 있는 경우 모달 대화 상자 구성 요소(앱의 자식)가 있는데, 상태 변수를 속성으로 사용하여 열려 있는지 아닌지를 결정하는 -- 표준 Reacting that I think. 내 문제: 앱의 상태 변수가 변경될 때(물론 후크를 통해), 앱의 아이들은 변..

객체 배열인 상태를 매핑할 때 구성요소를 다시 렌더링하는 방법 나는 상태에 있는 일련의 물체들을 매핑하려고 하는데, 그 상태에서 두 개의 반응 요소들 중 하나를 조건부로 반환하는 것이다.그런 다음 어느 시점에서 그 상태를 변경하고, 물체의 상태가 변경되면 구성요소가 다시 렌더링될 것으로 예상할 수 있다.내 문제가 리액션의 변화를 인식하지 못하는 것과 관련이 있다는 것은 이해하지만, 이 작업을 수행하려면 왜 어떤 패턴으로 변경해야 하는지 잘 모르겠어. 여기 코드펜: https://codepen.io/steven-harlow/pen/KKPLXRO 여기서 나온 암호는 다음과 같다. const App = (props) => { const [todos, setTodos] = React.useState([ {nam..

렌더 프로펠러 내부에 리액션 후크 사용 후크 규칙에서 가져온 내용: 루프, 조건 또는 내포된 함수에 있는 후크를 호출하지 마십시오.대신 항상 반응 기능의 최상위 수준에서 후크를 사용하십시오. 리액터 소품 기능 상단의 후크를 사용하는 것은 바람직하지 않은가?함수에 의해 반환되는 값에 따라 다르다고 가정한다. const MyComponent = () => ( {value => { React.useEffect(() => { // Magic }, [value]); return Hello; }} ); 그게 그들의 요구 사항을 어긴다고 생각하지 않는다. 이 규칙을 따르면 구성 요소가 렌더링될 때마다 동일한 순서로 후크가 호출되는지 확인하십시오. 하지만 내가 대신 다음과 같은 일을 해야 하는가? const MyCom..

이 React Class 구성 요소를 후크로 작성하는 더 좋은 방법? 나는 높이가 고정된 구간을 가지고 있다.들어오는 콘텐츠가 맞는지 안 맞는지 컴포넌트가 언제 장착(첫 렌더링)맞지 않으면 '추가 읽기' 버튼을 렌더링해야 한다. 다음과 같이 보인다. 원래 DidMount/DidUpdate 라이프사이클 방법을 사용하여 클래스 구성 요소로 작성했었습니다. 클래스 구성요소 import React, { createRef } from "react" import styled from "@emotion/styled" import Section from "../Section" import ButtonReadMore from "./ButtonReadMore" import Paragraphs from "./Paragrap..

리액션 후크를 사용하여 "refs"를 동적으로 추가하는 방법? 그래서 나는 데이터 배열을 가지고 있고 그 데이터로 구성요소 목록을 만들고 있다.생성된 각 요소에 대한 참조를 통해 높이를 계산하고 싶다.클래스 구성 요소로 할 줄 알지만 리액션 후크로 하고 싶다. 내가 하고 싶은 일을 설명하는 예는 다음과 같다. import React, {useState, useCallback} from 'react' const data = [ { text: 'test1' }, { text: 'test2' } ] const Component = () => { const [height, setHeight] = useState(0); const measuredRef = useCallback(node => { if (node !..