반응형

reactjs 31

불변성 실패:외부에서는 사용하지 마십시오.

불변성 실패:외부에서는 사용하지 마십시오. 용 i i i i를 쓴다.react-router-dom을 중입니다.React★★★. 했습니다.내 앱의 일부가 다른 패키지로 추출되었습니다.의존관계 목록은 다음과 같습니다. ./app/syslog/syslog.json { "dependencies": { "@app/components": "^1.0.0", "react": "^16.8.5", "react-dom": "^16.8.5", "react-router-dom": "^5.0.0" } } ./애플리케이션/컴포넌트/프로세서.json { "peerDependencies": { "react-router-dom": "^5.0.0" } } @app/components가 필요합니다.react-router-dom하다 Unca..

programing 2023.04.02

useEffect 훅을 발생시킨 의존관계 배열 변수 확인

useEffect 훅을 발생시킨 의존관계 배열 변수 확인 어떤 변수인지 쉽게 판별할 수 있는 방법이 있을까요?useEffect의 의존관계 배열이 함수 재기동을 트리거합니까? 각 변수를 로그아웃하는 것만으로 오해의 소지가 있습니다.a함수와b는, 로그에 기록했을 때에 같은 것으로 표시되는 오브젝트입니다만, 실제로는 다른 오브젝트로, useEffect의 발화를 일으킵니다. 예를 들어 다음과 같습니다. React.useEffect(() => { // which variable triggered this re-fire? console.log('---useEffect---') }, [a, b, c, d]) 현재의 메서드에서는 과도한 useEffect 콜의 원인이 되는 동작을 인식할 때까지 의존관계 변수를 하나씩 삭..

programing 2023.04.02

오류 처리 방법 fetch()의 비동기/대기

오류 처리 방법 fetch()의 비동기/대기 리액트 앱에 스트라이프 비동기 코드가 있어 코드에 오류 처리를 추가하려고 하는데 어떻게 처리해야 할지 모르겠다. .then()으로 하는 방법은 알지만 비동기/ait는 처음입니다. 편집필 응답 탭의 네트워크 탭에서 오류가 발생했는데 콘솔에 기록할 수 있습니까? submit = async () => { const { email, price, name, phone, city, street, country } = this.state; let { token } = await this.props.stripe .createToken({ name, address_city: city, address_line1: street, address_country: country }) ..

programing 2023.04.02

material-ui 날짜 선택기를 사용할 수 없습니다.

material-ui 날짜 선택기를 사용할 수 없습니다. 무슨 이유인지 자재유이 날짜 선택기가 작동하지 않습니다.날짜 선택기가 React에 렌더링될 때마다 다음 오류가 발생합니다. 범위 오류:형식 문자열에 이스케이프되지 않은 라틴 알파벳 문자가 포함되어 있습니다.n datepicker(https://stackblitz.com/edit/react-6ma6xd?embed=1&file=index.js))만으로 stackblitz를 작성했는데, 거기에도 에러가 표시됩니다.내가 뭘 잘못하고 있지?설치 안내서의 지시사항을 모두 따랐던 것 같습니다. material-ui/pickers 링크:https://material-ui-pickers.dev/저도 같은 문제가 있었는데, GITHUB에서 이걸 발견했어요. http..

programing 2023.04.02

리액트에서의 코멘트 사용방법

리액트에서의 코멘트 사용방법 코멘트를 사용하려면 어떻게 해야 하나요?renderReact 컴포넌트의 메서드 다음과 같은 컴포넌트가 있습니다. 'use strict'; var React = require('react'), Button = require('./button'), UnorderedList = require('./unordered-list'); class Dropdown extends React.Component{ constructor(props) { super(props); } handleClick() { alert('I am click here'); } render() { return ( // whenClicked is a property not an event, per se. ) } } mo..

programing 2023.03.28

리액트 메모는 언제 사용하면 안 되나요?

리액트 메모는 언제 사용하면 안 되나요? 리액트랑 장난치고 있어 16.6.0최근 리액트 메모의 아이디어는 마음에 듭니다만, 실장에 최적인 시나리오에 대해서는 아무것도 찾을 수 없었습니다. React 문서(https://reactjs.org/docs/react-api.html#reactmemo)에서는 단순히 모든 기능 컴포넌트에 정보를 보내는 것으로는 아무런 영향이 없는 것 같습니다. 재렌더가 필요한지 여부를 파악하기 위해 얄팍한 비교를 하기 때문에 성능에 부정적인 영향을 미치는 상황은 발생하지 않습니까? 다음과 같은 상황은 구현하기에 명백한 선택인 것 같습니다. // NameComponent.js import React from "react"; const NameComponent = ({ name }) ..

programing 2023.03.28

릴레이에서 노드인터페이스와 글로벌 ID 사양은 어떤 역할을 합니까?

릴레이에서 노드인터페이스와 글로벌 ID 사양은 어떤 역할을 합니까? 저는 처음에relay-starter-kit릴레이 및 GraphQL 문서도 검토했습니다.하지만 설명할 수 없고 불가사의한 부분이 꽤 있다. 이 모든 것에 대한 많은 문서를 읽었지만 다음 질문에 대한 만족스러운 설명을 찾을 수 없었습니다. 이것은 어떤 용도로 사용되나요?로깅을 넣었는데 전혀 호출되지 않습니다. var {nodeInterface, nodeField} = nodeDefinitions( (globalId) => { var {type, id} = fromGlobalId(globalId); if (type === 'User') { return getUser(id); } else if (type === 'Widget') { return..

programing 2023.03.28

화살표 본문을 둘러싼 예기치 않은 블록 문

화살표 본문을 둘러싼 예기치 않은 블록 문 사용하고 있다"eslint-config-airbnb": "^6.1.0",JavaScript를 깔끔하게 유지합니다. 내 린터는 합법적인 코드로 보이는 것에 불만족스러워 합니다. 이것은 현재 진행 중인 문제인 것 같습니다.OCD 개발자에게 이 문제에 어떻게 대처해야 할지 제안해 주실 분 계십니까?이 규칙을 무효화하거나 다른 방법으로 할 것인가.block 문은 하나의 식에 필요하지 않습니다. this.state.todos.filter(filterTodo => filterTodo !== todo); 블록 문 안에 화살표 기능을 래핑하지 않으려면 해제할 수 있습니다. module.exports = { extends: "airbnb-base", rules: { "arrow..

programing 2023.03.28

useState 훅 세터가 상태를 잘못 덮어씁니다.

useState 훅 세터가 상태를 잘못 덮어씁니다. 문제는 다음과 같습니다.버튼 클릭 한 번으로 두 가지 기능을 호출하려고 합니다.두 함수 모두 상태를 업데이트합니다(useState 훅 사용 중).첫 번째 함수는 값 1을 'new 1'로 올바르게 업데이트하지만, 1s(setTimeout) 후 두 번째 함수가 실행되어 값 2가 'new 2'로 변경됩니다.값 1을 다시 '1'로 설정합니다.왜 이런 일이 생기는 건가요?잘 부탁드립니다! import React, { useState } from "react"; const Test = () => { const [state, setState] = useState({ value1: "1", value2: "2" }); const changeValue1 = () => ..

programing 2023.03.28

버튼과 같은 반응 구성요소에서 활성, 호버와 같은 복합 반응 인라인 스타일 설정

버튼과 같은 반응 구성요소에서 활성, 호버와 같은 복합 반응 인라인 스타일 설정 제 단추는 css에 다음과 같은 스타일이 있습니다.부트스트랩도 사용하고 있습니다. .btn-primary { background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); background-repeat: repeat-x; border-color: #1f90bb #1f90bb #145e7a; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-prima..

programing 2023.03.28
반응형