codebag

TypeScript, React, Eslint 및 단순 Arrow 함수 컴포넌트 문제 저는 이 문제로 오전 내내 고민하고 있고, 어디에서도 해결책을 찾을 수 없었습니다.저는 타이프스크립트를 처음 접하기 때문에 코드 형식이 올바른지 확인하기 위해 Eslint와 Pretty에서 올바르게 셋업하려고 합니다. 그래서 기능적인 컴포넌트를 만들 때 직면하게 되는 문제가 있습니다.cheatsheet에 따르면 다음과 같은 간단한 컴포넌트를 내보내려고 합니다. import React from "react"; type DivProps = { text: string; }; const Div = ({ text }: DivProps): JSX.Element => ({text}) export default Div; 그러나 esl..

react.js & redux에서 componentDisMount가 여러 번 호출된 이유는 무엇입니까? 저는 책을 읽어요.componentDidMount첫 번째 렌더링에서는 한 번만 호출되는데 여러 번 호출되는 것 같아요. 내가 재귀 루프를 만든 것 같아. componentDiMount가 데이터를 가져오는 액션을 디스패치했습니다. 데이터를 수신하면 성공 액션을 실행하여 데이터를 redux 상태로 저장합니다. 상위 반응 구성요소는 레독스 저장소에 연결되어 있으며mapStateToProps위의 단계에서 방금 변경된 엔트리에 대해 부모가 하위 구성 요소를 렌더링합니다(변수를 통해 프로그래밍 방식으로 선택됨). 하위 구성 요소의 componentDidMount가 다시 호출됩니다. 데이터를 가져오는 액션을 디스패..

Redx를 사용한 리액트 라우터 변경에 대응하여 새 데이터를 가져오는 방법 Redux, Redux-router 및 reactjs를 사용하고 있습니다. 경로 변경 정보를 가져오는 앱을 만들려고 하는데, 다음과 같은 것이 있습니다. 에 들어갈 때artist/아티스트를 검색하여 정보를 렌더링하고 싶습니다.문제는, 이 일을 하는 가장 좋은 방법이 무엇인가 하는 것입니다. RxJ를 사용하거나 미들웨어를 사용하여 요청을 관리하는 등 이에 대한 해답을 찾았습니다.여기서 궁금한 것은 이것이 정말 필요한가, 아니면 아키텍처에 의존하지 않고 반응할 수 있는 방법인가 하는 것입니다.필요한 정보를 react componentDidMount() 및 componentDidUpdate()에서 가져올 수 있습니까?지금은 정보를 요구..

React 구성 요소에서 사용자 지정 함수 생성 React 컴포넌트가 있다. export default class Archive extends React.Component { ... } componentDidMount그리고.onClick메서드는 파라미터가 약간 변경된 것을 제외하고 부분적으로 동일한 코드를 사용합니다. 컴포넌트 클래스 내에서 기능을 생성하여 컴포넌트의 범위에서 재사용할 수 있습니까?반응 성분에서 함수를 생성할 수 있습니다.이 클래스는 실제로 다음에서 상속되는 일반 ES6 클래스입니다.React.Component에 기재되어 있는 올바른 컨텍스트에 바인드 하는 것만으로 주의해 주세요.onClick이벤트: export default class Archive extends React.Compon..

useState 초기값을 함수로 사용하는 경우 사용하는 경우는 무엇입니까?useState함수로서의 초기값 단순히 값을 전달하는 것과 차이가 있습니까? 예. const [state, setState] = useState(() => someValue) 초기 상태의 계산을 한 번만 수행할 때 사용합니다.그 대신 다음과 같은 표현을 사용할 수 있습니다. const [state, setState] = useState(compute()) 그compute다른 렌더링에서도 실행되며 첫 번째 렌더링 후에는* 해당 값만 무시됩니다. 이 경우: const [state, setState] = useState(() => compute()) 지금이다,compute는 한 번만 실행됩니다. 문서에서: const [state, set..

React + Redux - 폼 컴포넌트에서 CRUD를 처리하는 가장 좋은 방법은 무엇입니까? 작성, 읽기, 업데이트 및 삭제에 익숙한 폼이 하나 있습니다.같은 형태로 3개의 컴포넌트를 만들었지만 다른 소품을 전달합니다.CreateForm.js, ViewForm.js(삭제버튼을 사용하여 읽기 전용), UpdateForm.js를 입수했습니다. 저는 PHP로 작업했었기 때문에 항상 한 가지 형태로 작업했습니다. 저는 리액트와 레독스를 사용하여 가게를 관리합니다. CreateForm 컴포넌트에 있는 경우 이 소품을 서브 컴포넌트에 전달합니다.createForm={true}값을 채우지 않고 비활성화하지 않도록 합니다.ViewForm 컴포넌트에서 이 소품을 전달합니다.readonly="readonly". 그리고 ..

joke가 구현되지 않았습니다.경보() 나는 나의 API에 대한 테스트를 농담으로 작성했다.테스트 파일에 아래와 같이 API를 호출하는 기능을 추가하였습니다. import AuthManager from "../Client/Modules/Auth/AuthManager"; 다음과 같이 사용합니다. test("login api resolves true", () => { return expect(AuthManager.login("test", "test")).resolves.toMatchObject( expect.objectContaining({ accessToken: expect.any(String), email: expect.any(String), expiresIn: expect.any(Number), ref..

Jest 테스트 실패: TypeError: window.matchMedia가 함수가 아닙니다. 프런트 엔드 테스트는 이번이 처음입니다.했습니다.TypeError: window.matchMedia is not a function내 컴포넌트 안에. Jest 문서를 살펴보니 "Manual mocks" 섹션을 찾았는데, 아직 어떻게 해야 할지 모르겠어요.이제 Jest 문서에는 다음과 같은 "공식" 해결 방법이 있습니다. Object.defineProperty(window, 'matchMedia', { writable: true, value: jest.fn().mockImplementation(query => ({ matches: false, media: query, onchange: null, addListen..

빈 배열을 입력으로 사용하는 'useCallback'과 두 번째 매개 변수를 사용하지 않는 'useCallback'의 차이점은 무엇입니까? 리액트 훅을 더 잘 이해하려고 하는 여정에서 예상치 못한 행동을 목격했다.하여 해당 이 함수는 나의 onRef로 됩니다.'s컴포넌트가 재렌더될 때마다 어레이는 계속 커졌습니다.아마 단순한 화살표 기능이기 때문에 메모가 되어 있지 않았을 것입니다. 이렇게 .useCallback같은 레퍼런스를 여러 번 받지 않도록 하기 위해 훅을 설치했지만 놀랍게도 여전히 재렌더마다 함수를 호출했습니다.빈 배열을 두 번째 매개 변수로 추가한 후 refs는 예상대로 컴포넌트당 한 번만 실행됩니다. 이 동작에 대해서는, 다음의 스니펫을 참조해 주세요. const Example = () =>..

반작용을 가진 공리에서 멀티파트를 설정하려면 어떻게 해야 합니까? 무언가를 컬링하면 정상적으로 동작합니다. curl -L -i -H 'x-device-id: abc' -F "url=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" http://example.com/upload 어떻게 하면 공리들을 제대로 작동시킬 수 있을까요?문제가 될 경우 리액션을 사용합니다. uploadURL (url) { return axios.post({ url: 'http://example.com/upload', data: { url: url }, headers: { 'x-device-id': 'stuff', 'Content-Type': 'multipart/form-data' } }) ...