반응형

reactjs 22

리액트 프런트엔드를 전개할 때 API 서버 URL을 삽입하는 방법

리액트 프런트엔드를 전개할 때 API 서버 URL을 삽입하는 방법 면책사항:저는 리액트 누브이기 때문에 리액트 웨이가 아닌 것 같습니다. S3나 Google Storage와 같은 클라우드 프로바이더가 정적으로 서비스를 제공하기 위해 배포할 React 프런트 엔드를 작성합니다.이 프런트 엔드는 클라우드 어딘가에 있는 여러 API 서버와 상호 작용합니다. 같은 프로바이더에 있을 수도 있고 아닐 수도 있습니다.또한 UI 또는 UI의 일부를 개발하는 동안 이러한 서버의 주소는 로컬 또는 테스트 인스턴스일 수 있습니다. 다른 주소를 사용하여 개발, 스테이징 또는 Prod에 도입할 수 있도록 API 서버의 URL을 유연하게 리액트 애플리케이션에 삽입하려면 어떻게 해야 합니까? 솔루션: 최종적으로 제안된 솔루션을 조..

programing 2023.03.17

useRef TypeScript - LegacyRef 유형에 할당할 수 없습니다.

useRef TypeScript - LegacyRef 유형에 할당할 수 없습니다. 사용하려고 합니다.useRefTypeScript에 문제가 있습니다. 내 거랑RefObject(아마도) 접속할 필요가 있다current(즉,node.current) 나는 다음을 시도했다. const node: RefObject = useRef(null); const node = useRef(null); 근데 제가 세팅하러 갔을 때refX는 항상 듣고 있다is not assignable to type 'LegacyRef | undefined'. return { children } 편집: 이것은 한 가지 요소 유형으로 제한되지 않아야 합니다.HTMLDivElement | HTMLFormElement | HTMLInputEleme..

programing 2023.03.17

React에서 setState를 사용하여 개체 업데이트

React에서 setState를 사용하여 개체 업데이트 을 브브트 object object로 갱신할 수 ?setState 예를 들어 다음과 같습니다. this.state = { jasper: { name: 'jasper', age: 28 }, } 시도했습니다. this.setState({jasper.name: 'someOtherName'}); 또, 이하와 같이 됩니다. this.setState({jasper: {name: 'someothername'}}) 첫 번째 경우 구문 오류가 발생하고 두 번째 경우 구문 오류가 발생하지 않습니다.좋은 생각 있어요?여기에는 여러 가지 방법이 있습니다.상태 갱신은 비동기 조작이기 때문에 상태 오브젝트를 갱신하기 위해서는 다음과 같이 업데이터 기능을 사용해야 합니다.se..

programing 2023.03.07

React Hook useEffect에 종속성이 누락되었습니다. '리스트'

React Hook useEffect에 종속성이 누락되었습니다. '리스트' 다음 코드를 실행하면 다음 오류가 나타납니다. React Hook useEffect에 종속성이 누락되었습니다. '리스트'입니다.포함하거나 의존관계 어레이 리액트 훅/exhaustive-dep을 삭제합니다. 경고의 이유를 찾을 수 없습니다. import React, { useState, useEffect } from 'react'; import axios from 'axios'; import Form from './Form'; const App = () => { const [term, setTerm] = useState('pizza'); const [list, setList] = useState([]); const submitSea..

programing 2023.03.02

리액트 라우터에서 링크 컴포넌트를 추가하는 Material-ui

리액트 라우터에서 링크 컴포넌트를 추가하는 Material-ui 추가하는데 어려움을 겪고 있습니다. AppBarmaterialui의 다음은 내 내비게이션 클래스입니다. class Navigation extends Component { constructor(props) { super(props) } render() { var styles = { appBar: { flexWrap: 'wrap' }, tabs: { width: '100%' } } return ( ) } } 어느 쪽이 좋을까: 탭은 클릭할 수 있고, 애니메이션은 유동적으로 되어 있습니다.멋집니다.하지만 어떻게 연결하면react-router 그것은 '그것'의 '그것의 '그것'이다. 컴포넌트? 추가하려고 했습니다.onChange「이것들」은 다음과 ..

programing 2023.03.02

['type aliases'는 .ts 파일에서만 사용할 수 있습니다]

['type aliases'는 .ts 파일에서만 사용할 수 있습니다] react-native init "name project" 명령어를 사용했는데, 오픈 vscode에 오류 메시지 코드가 있는 것 같습니다.(이미지) VS Code에 필요한 작업입니다.GIF를 주의 깊게 관찰해 주세요. Steps to resolve error 1. Go to extension 2. Click on more (...) and select Show Built-in extension 3. Search "TypeScript and JavaScript Language Features" - yellow & blue icon 4. Click on Setting icon of extension and select Disable (wo..

programing 2023.02.25

Reactjs를 사용하여 입력 필드를 지우시겠습니까?

Reactjs를 사용하여 입력 필드를 지우시겠습니까? 아래 변수를 사용하고 있습니다. var newInput = { title: this.inputTitle.value, entry: this.inputEntry.value }; 이것은 입력 필드에서 사용됩니다. this.inputTitle = el} /> this.inputEntry = el} className="form-control" /> Add 활성화되면{this.sendthru}입력 필드를 지우고 싶습니다.하지만 어떻게 해야 할지 모르겠어요. 또, 이 예에 나타나듯이, 제가 지적받은 것은,ref입력값 속성.내가 잘 모르는 것은, 이 모든 것을 가지고 있다는 것이 정확히 무엇을 의미하는가 하는 것이다.{el => this.inputEntry = el..

programing 2023.02.25

axios와 함께 bearer 토큰 전송

axios와 함께 bearer 토큰 전송 리액트 앱에서는 악시오스를 사용하여 REST API 요청을 수행합니다. 그러나 요청과 함께 Authorization 헤더를 보낼 수 없습니다. 코드는 다음과 같습니다. tokenPayload() { let config = { headers: { 'Authorization': 'Bearer ' + validToken() } } Axios.post( 'http://localhost:8000/api/v1/get_token_payloads', config ) .then( ( response ) => { console.log( response ) } ) .catch() } ★★★★★★★★★★★★★★★★★★.validToken()method는 단순히 브라우저 스토리지에서 토..

programing 2023.02.25

로그인 여부 확인 - 리액트 라우터 애플리케이션 ES6

로그인 여부 확인 - 리액트 라우터 애플리케이션 ES6 react-router(v2.8.1) 및 ES6 구문을 사용하여 React.js 어플리케이션(v15.3)을 작성하고 있습니다.사용자가 먼저 로그인해야 하는지 확인하기 위해 페이지 간의 모든 전환을 대행 수신하도록 라우터 코드를 가져올 수 없습니다. 나의 최상위 렌더링 방법은 매우 단순합니다(앱도 단순합니다). render() { return ( ); } 웹상의 샘플은 모두 ES5 코드 또는 이전 버전의 react-router(버전 2보다 오래된 버전)를 사용하고 있으며 mixin(비권장) 및 willTransitionTo(호출되지 않음)를 사용한 다양한 시도는 실패했습니다. 사용자가 요청한 페이지에 도착하기 전에 인증을 강제하도록 글로벌 '인터셉터 ..

programing 2023.02.20

재료 UI에서 자동 완성 구성요소에 대한 변경 처리

재료 UI에서 자동 완성 구성요소에 대한 변경 처리 사용하고 싶다Autocomplete컴포넌트를 지정합니다.태그를 가져와 나중에 데이터베이스에 저장할 수 있도록 상태에 저장하려고 합니다.나는 반응으로 수업 대신 함수를 사용하고 있다.제가 해봤는데onChange하지만 아무 결과도 얻지 못했습니다. option.tags} renderInput={(params) => ( )} /> ; 유키 씨가 이미 언급했듯이onChange올바르게 기능합니다.2개의 파라미터를 수신합니다.설명서에 따르면: 서명:function(event: object, value: any) => void. event: 콜백 이벤트소스 value: null(Autocomplete 컴포넌트 내의 값/값). 다음은 예를 제시하겠습니다. import..

programing 2023.02.20
반응형