sourcejob

리액트 훅마운트 해제된 구성 요소에서 반응 상태 업데이트를 수행할 수 없음 다음의 에러가 표시됩니다. 마운트 해제된 구성 요소에서 반응 상태 업데이트를 수행할 수 없습니다.이것은 no-op이지만, 애플리케이션의 메모리 누수를 나타내고 있습니다.수정하려면 useEffect 정리 함수의 모든 구독 및 비동기 작업을 취소합니다. 데이터 가져오기가 시작되고 구성 요소가 마운트 해제되었지만 함수가 마운트 해제된 구성 요소의 상태를 업데이트하려고 하는 경우. 이 문제를 해결하는 가장 좋은 방법은 무엇입니까? CodePen의 예. default function Test() { const [notSeenAmount, setNotSeenAmount] = useState(false) useEffect(() => { let..

어떻게 반응 js에서 한 페이지에서 다른 페이지로 이동합니까? 컴포넌트는 2개입니다.첫 번째 컴포넌트에는 버튼이 하나 있습니다.버튼을 클릭하면 다른 컴포넌트 또는 다른 페이지로 이동합니다. 여기 제 코드가 있습니다.http://codepen.io/naveennsit/pen/pymqPa?editors=1010 class App extends React.Component { handleClick(){ alert('---'); } render() { return hello } } class Second extends React.Component { render() { return second component } } React.render( , document.getElementById('app')) 여기에는..

_reactDom2.default.render는 함수가 아닙니다. 다음 리액트 코드를 고려하다 main.filename 파일은 다음과 같습니다. import React from 'react'; import ReactDOM from 'react-dom'; import Maincontainner from './maincontainner'; ReactDOM.render( News , document.getElementById('content') ); 컴포넌트는 다음과 같습니다. import React from 'react'; export default class Maincontainner extends React.Component{ render() { console.log("I am here"); return..

모든 MUI 구성 요소의 글꼴 패밀리 변경 코드 수가 적은 MUI 컴포넌트의 폰트 패밀리를 변경할 수 있습니까?여러 가지 방법을 시도해 봤지만 여전히 할 수 없어요.폰트 패밀리를 개별적으로 변경해야 하기 때문에 많은 작업이 필요합니다.다른 방법은 없나요?material-ui@next 라이브러리에서 다음과 같이 글꼴을 변경할 수 있습니다.예를 들어 다음과 같습니다.다음과 같이 정의됩니다. // Material UI import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; const App = () => ( ); ReactDOM.render(, document.getElementById('app')); 에서theme을 지지하다.MuiThe..

리액트 훅 - 상태가 변경되지 않았는데도 useEffect가 실행됩니다. 다른 상태 속성이 변경되면 보기가 변경되는 효과를 내 구성 요소 내부에 설정했습니다.그러나 어떤 이유에서인지 컴포넌트가 마운트되면 효과가 실행됩니다.detailIndex변경되지 않았습니다. const EventsSearchList = () => { const [view, setView] = useState('table'); const [detailIndex, setDetailIndex] = useState(null); useEffect(() => { console.log('onMount', detailIndex); // On mount shows "null" }, []); useEffect( a => { console.log('Ru..

모든 이력 스테이트에 대해 react-router routed-component를 유지합니다. 나는 Cordova로 모바일 애플리케이션을 만든다.를 사용합니다.react-router@2.0.0+ReactCSSTransitionGroup"카드 덱" 애니메이션을 구현합니다.원형 링크가 없는 엄격한 루트 트리를 가지고 있습니다. 퍼포먼스를 향상시키고 이전 루트 컴포넌트 상태를 저장하기 위해 pop-state 또는 replace-state에만 마운트 해제하여 이들 이력을 모두 유지합니다. 어떻게 하는 거야?rootRoute 설정 시 onEnter 및 onChange 콜백을 이용할 수 있습니다. onEnter callback에서 초기 루트 경로를 기록할 수 있습니다.onChange 콜백에서는 cur 경로와 다음 ..

반응 쿼리:사용방법버튼 클릭 시 쿼리 이 리액트 쿼리 라이브러리는 처음입니다. 데이터를 가져오려면 이 라이브러리를 사용하여 다음과 같은 작업을 수행할 수 있습니다. const fetchData = async()=>{...} // it starts fetching data from backend with this line of code const {status, data, error} = useQuery(myKey, fetchData()); 그건 효과가 있다.하지만 버튼을 클릭했을 때만 데이터 가져오기를 트리거하려면 어떻게 해야 합니까? , 다음과 같은 작업을 수행할 수 있습니다. {useQuery(myKey, fetchData())}}/>단, 반환된 데이터와 상태를 관리하는 방법은 다음과 같습니다.API..

HOC - 기능 컴포넌트 그 후 리액트 앱으로 HOC를 작성했습니다만, 정상적으로 동작하고 있습니다.다만, 기능 컴포넌트로서 HOC를 작성할 수 있는 방법이 있을까요(상태의 유무에 관계없이)--?는 예를 들어 클래스 기반 컴포넌트이기 때문입니다. 웹상에서 같은 것을 찾으려고 했지만 아무것도 얻을 수 없었다.그게 가능하기나 하냐고?아니면 옳은 일이란 말인가? 어떤 잠재 고객이라도 감사히 받겠습니다:)나는 siraj에 동의한다, 엄밀히 말하면 받아들여진 답변의 예는 진정한 HOC가 아니다.HOC의 구별되는 기능은 컴포넌트를 반환하는 반면,PrivateRoute승인된 답변의 구성요소는 구성요소 자체입니다.따라서, 이것은, 목적의 달성은 훌륭하지만, HOC의 좋은 예라고는 생각하지 않습니다. 기능하는 컴포넌트의..

플러그인 가져오기를 로드하지 못했습니다. 'eslint-plugin-import' 리액션이 처음이에요.노드 설치 튜토리얼 단계를 따릅니다.하지만 막상 달려보면npm start에러가 계속 표시됩니다. Failed to compile. ./src/index.js Module build failed: Error: Failed to load plugin import: Cannot find module 'eslint-plugin-import' Referenced from: at Array.forEach (native) at Array.reduceRight (native) 또, 「eslint-plugin-import」를 인스톨 하려고 했지만, 허사였습니다. npm install eslint-plugin-import..

joke.fn() 메서드와 joke.spyOn() 메서드의 차이점은 무엇입니까? 저는 리액션 프로젝트를 위해 유닛 테스트 케이스를 작성하고 테스트 케이스를 작성하기 위해 농담과 효소를 사용하고 있습니다.나는 농담 문서를 읽었다. https://jestjs.io/docs/en/jest-object.html#jestspyonobject-methodname 에 대해 설명하겠습니다.jest.spyOn()그 방법을 완전히 이해하지 못했습니다. 그래서 나는 우리가 사용해야 할 구체적인 장소에 대해 더 자세히 알고 싶다.jest.fn()또, 사용처/사용처jest.spyOn()두 방법 모두 예를 들어 설명해주면 감사하겠습니다. 감사해요.리액트/프런트엔드 프로젝트에서 이 두 가지 기능을 간단히 이해하면 다음과 같습니다...