madecode

React/MUI Autocomplete 컴포넌트에 고유 키를 추가하려면 어떻게 해야 합니까? Material-UI를 생성하려고 합니다.Autocomplete기본적으로 사용자에게 검색 결과만 표시하는 구성 요소.일부 옵션의 이름은 중복되지만 모두 고유한 ID를 가집니다.다음 경고를 받습니다. index.js:1 경고: 같은 키를 가진 두 아이가 발견되었습니다.Name B업데이트 후에도 컴포넌트가 ID를 유지할 수 있도록 키는 고유해야 합니다.고유하지 않은 키로 인해 하위 키가 복제되거나 누락될 수 있습니다. 이 동작은 지원되지 않으며 향후 버전에서 변경될 수 있습니다. const SearchField = () => { const [open, setOpen] = React.useState(false) co..

리덕스 단위의 셀렉터는 무엇입니까? 에서 이 코드를 따르려고 합니다.redux-saga export const getUser = (state, login) => state.entities.users[login] export const getRepo = (state, fullName) => state.entities.repos[fullName] 그런 다음 이 소설에서 다음과 같이 사용됩니다. import { getUser } from '../reducers/selectors' // load user unless it is cached function* loadUser(login, requiredFields) { const user = yield select(getUser, login) if (!user |..

React에서 개체를 심층 복제하려면 어떻게 해야 합니까? let oldMessages = Object.assign({}, this.state.messages); // this.state.messages[0].id = 718 console.log(oldMessages[0].id); // Prints 718 oldMessages[0].id = 123; console.log(this.state.messages[0].id); // Prints 123 어떻게 하면 예방할 수 있을까요?oldMessages참고가 되기 위해, 나는 그 가치를 바꾸고 싶다.oldMessages가치를 바꾸지 않고state.messages깊이 복사해야 합니다.Lodash의 cloneDeep를 사용하면 다음과 같은 이점이 있습니다. imp..

typescript 컴파일러가 1개의 리액트 상태 속성만으로 setState를 호출할 수 있도록 합니다. 프로젝트에 Typescript with React를 사용하고 있습니다.이 인터페이스에서는 메인컴포넌트가 상태가 됩니다. interface MainState { todos: Todo[]; hungry: Boolean; editorState: EditorState; //this is from Facebook's draft js } 그러나 아래 코드(발췌된 코드만)는 컴파일되지 않습니다. class Main extends React.Component { constructor(props) { super(props); this.state = { todos: [], hungry: true, editorState..

normalizr로 생성된 redux store에 추가/삭제하려면 어떻게 해야 합니까? README의 예를 다음에 나타냅니다. '불량' 구조가 있는 경우: [{ id: 1, title: 'Some Article', author: { id: 1, name: 'Dan' } }, { id: 2, title: 'Other Article', author: { id: 1, name: 'Dan' } }] 새로운 오브젝트를 추가하는 것은 매우 간단합니다.제가 해야 할 일은 return { ...state, myNewObject } 리듀서 안에. 이제 '좋은' 나무의 구조를 보면 어떻게 접근해야 할지 모르겠다. { result: [1, 2], entities: { articles: { 1: { id: 1, title: ..

Electron과 함께 리액트 라우터를 사용하는 방법 이 보일러 플레이트를 참고하여 Electron 앱을 만들었습니다.웹 팩을 사용하여 스크립트를 번들하고 express 서버를 사용하여 스크립트를 호스트합니다. 웹 팩 구성은 이것과 거의 같고 서버 구성도 이와 같습니다. Electron의 스크립트 로드: mainWindow.loadURL('file://' + __dirname + '/app/index.html'); 또한 index.html은 서버에서 호스팅하는 스크립트를 로드합니다. 나는 달린다electron index.js앱을 만들고node server웹 팩을 사용하여 스크립트를 번들하는 서버를 시작합니다. 정상적으로 동작합니다.React 컴포넌트 앱이 마운트되어 있습니다.리액트 라우터를 어떻게 통합하..

"모듈 외부에서 Import 문을 사용할 수 없습니다"를 해결하는 방법 TypeScript, Jest, Webpack, Babel의 React(Create React App)입니다.「 」를 할yarn jest 라고 하는 에러가 발생합니다. 패키지를 모두 제거하고 다시 추가해 보았습니다.이 문제는 해결되지 않습니다.비슷한 질문과 서류를 봤는데 아직도 뭔가 오해를 하고 있어요.저는 이 환경을 처음부터 설정하기 위해 다른 가이드까지 따라갔지만, 이 문제는 제 코드로 받았습니다. 의존관계는 다음과 같습니다. "dependencies": { "@babel/plugin-transform-runtime": "^7.6.2", "@babel/polyfill": "^7.6.0", "babel-jest": "^24.9.0"..

Axios를 사용한 액세스 제어 오리진 헤더 오류 리액트 웹 앱에서 Axios를 사용하여 API 호출을 하고 있습니다.하지만 Chrome에서 다음 오류가 나타납니다. XMLHttpRequest cannot load https://example.restdb.io/rest/mock-data. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. { axios .get("https://example.restdb.io/rest/mock-data", { headers: { "x-apikey": "API_KEY", }..

공용 폴더의 ReactJ 및 이미지 저는 ReactJS에 처음 와서 컴포넌트에 이미지를 Import하고 싶습니다.이러한 이미지는 공용 폴더 내에 있으며, 리액트 구성 요소에서 폴더에 액세스하는 방법을 알 수 없습니다. 좋은 생각 있어요? 편집 Bottom.js 또는 Header.js 내의 이미지를 Import합니다. 구조 폴더는 다음과 같습니다. 웹 팩을 사용하지 않습니다.그럴까? 편집 2 웹 팩을 사용하여 이미지와 나머지 자산을 로드하고 싶습니다.설정 폴더에는 다음 파일이 있습니다. 이미지의 경로를 추가해야 하는 위치와 방법은 무엇입니까? 감사해요.여기에는 웹 팩 구성이 필요하지 않습니다. 컴포넌트에서 이미지 경로만 제공합니다.React는 퍼블릭디렉토리에서 그것을 알 수 있습니다. 공공장소에서 이미지를..

스위치 문에서 대/소문자 문 들여쓰기에 대한 eslint 규칙을 수정할 수 없습니다. 이것은 스위치/케이스 스테이트먼트에 대해 eslint 에러가 발생했음을 나타내는 서브슬림 텍스트 창의 스크린샷입니다.코드와 같이 4칸을 들여쓰기를 원합니다. 리액트 앱의 .eslintrc 파일을 수정하여 4개의 공백 들여쓰기를 시도합니다.솔루션을 검색해 보니 switchCase와 intdSwitchCase를 모두 추가하는 제안이 있었습니다만, .eslintrc 규칙은 모두 공백으로 되어 있고, camelcase가 아니기 때문에, 숭고한 텍스트에서 에러를 삭제하기 위해서 4개의 규칙을 모두 추가했지만, 결과는 없었습니다.내가 뭘 잘못하고 있지?!?! 편집: 이것은 React/MERN 앱으로, 편집자로서 숭고한 텍스트를 사..