렌더링에서 아무것도 반환되지 않았습니다.이는 보통 반환문이 누락되었음을 의미합니다.또는 아무것도 렌더링하지 않으려면 null을 반환하십시오.
Index.js에 Import하는 컴포넌트가 React에 있는데 다음 오류가 발생합니다.
렌더링에서 아무것도 반환되지 않았습니다.이는 보통 반환문이 누락되었음을 의미합니다.또는 아무것도 렌더링하지 않으려면 null을 반환하십시오.
index.syslog:
import React from 'react';
import ReactDOM from 'react-dom';
import Search_Bar from './components/search_bar';
const API_KEY = 'AIzaSyCnpDObOLiiqN87YKJKZ-cxzdAsvYD1F-U';
const App = () => {
return
(
<div>
<Search_Bar />
</div>
);
}
ReactDOM.render(<App />, document.querySelector('#root'));
컴포넌트:
import React from 'react';
const Search_Bar = () =>
{
return <input />;
};
export default Search_Bar;
render() 메서드에서도 같은 문제가 발생하였습니다.이 문제는 render()에서 다음과 같이 돌아왔을 때 발생합니다.
render() {
return
(
<div>Here comes JSX !</div>
);
}
즉, 괄호를 새 행으로 시작하는 경우
사용 방법:
render() {
return (
<div>Here comes JSX !</div>
);
}
이렇게 하면 오류가 해결됩니다.
상태 비저장 구성 요소를 화살표 함수로 사용하는 경우 내용은 괄호 "{}" 대신 괄호("") 안에 들어가야 하며 반환 함수를 제거해야 합니다.
const Search_Bar= () => (
<input />;
);
문제는 반환에 있습니다.이것을 시험해 보세요.
return(
);
이것은 나의 문제를 해결했다.
이 에러는, 몇개의 이유로 볼 수 있습니다.
- 위에서 설명한 바와 같이 괄호를 새 행으로 시작합니다.
오류:
render() {
return
(
<div>I am demo data</div>
)
}
render:
render() {
return (
<div>I am demo html</div>
);
}
예에서는, 「」의에 있는 되고 있습니다.return스테이트먼트는 아무런 차이가 없습니다.
- 또, 라우팅에 잘못된 브래킷이 사용되고 있는 경우도 있습니다.
오류:
export default () => {
<BrowserRouter>
<Switch>
<Route exact path='/' component={ DemoComponent } />
</Switch>
</BrowserRouter>
}
올바른 방법:
export default () => (
<BrowserRouter>
<Switch>
<Route exact path='/' component={ DemoComponent } />
</Switch>
</BrowserRouter>
)
에러 예에서는, 곱슬곱슬한 괄호를 사용하고 있습니다만, 대신에 둥근 괄호를 사용할 필요가 있습니다.이 경우에도 같은 오류가 발생합니다.
Jest 테스트를 실행할 때 이 오류가 발생했습니다.셋업 파일에서 컴포넌트 중 하나가 조롱당하고 있었기 때문에 테스트에서 실제 컴포넌트를 사용하려고 했을 때 매우 의외의 결과가 나왔습니다.
jest.mock("components/MyComponent", () => ({ children }) => children);
이 모의(실제로 필요하지 않은)를 삭제하면 문제가 즉시 해결되었습니다.
컴포넌트로부터 올바르게 돌아오고 있는 것을 알게 되면, 몇시간간의 조사를 절약할 수 있을 것입니다.
★★★★★★★★★★★★★에서도 같은 문제가 있었습니다.nothing was returned from render.
내 에서 컬리브레이크가 {}코드를 이렇게 썼어요.
import React from 'react';
const Header = () => {
<nav class="navbar"></nav>
}
export default Header;
안에 있어야 합니다.():
import React from 'react';
const Header = () => (
<nav class="navbar"></nav>
);
export default Header;
컴포넌트는 곱슬곱슬한 괄호로 둘러싸여 있었습니다. { ★★★★★★★★★★★★★★★★★」}:
const SomeComponent = () => {<div> Some Component Page </div>}
둥근 괄호로 교체합니다. ( ★★★★★★★★★★★★★★★★★」)문제를 해결했습니다.
const SomeComponent = () => (<div> Some Component Page </div>)
나는 이 오류에 대한 답을 찾기 위해 이 스레드를 발견했다.
dev start에서는 모든 하지만, 하고, 그 에 「npm start」dev(npm start)로 합니다."npm 실행 빌드"하면 에러가 발생합니다.serve -s build.
다음과 같이 렌더링 블록에 코멘트가 있는 경우 오류가 발생합니다.
ReactDOM.render(
<React.StrictMode>
// this will cause an error!
<Provider store={store}>
<AppRouter />
</Provider>
</React.StrictMode>,
document.getElementById("root")
);
다른 사람이 같은 문제로 이 문제를 마주칠 경우를 대비해서 공유합니다.
답을 찾았습니다. 하다 뒤에 괄호를 쓰면 안 돼요.return ()이은 다음과 같습니다.
return <div> <Search_Bar /> </div>
줄을 , 「 」를 참조해 주세요.return ( ...
는 하다와 .return
문제는 반품할 때 괄호인 것 같습니다.괄호는 다음과 같은 반환문과 일치해야 합니다.
return(
)
이 방법은 아닙니다.
return
(
)
이 에러는, 발신자 클래스에서 커스텀 컴퍼넌트를 Import 하는 방법에 의해서 발생했습니다.하고 있었어요
import {MyComponent} from './components/MyComponent'
대신
import MyComponent from './components/MyComponent'
후자를 사용하여 문제를 해결했습니다.
이 문제가 화면에 표시되는 또 다른 방법은 조건을 지정하고 반환을 삽입하는 것입니다.조건이 충족되지 않으면 반환할 것이 없습니다.이 때문에 에러가 발생합니다.
export default function Component({ yourCondition }) {
if(yourCondition === "something") {
return(
This will throw this error if this condition is false.
);
}
}
외부 리턴을 null로 삽입했을 뿐인데 다시 정상적으로 작동했습니다.
이 에러 메세지가 표시되었지만, 매우 기본적인 실수입니다.다른 컴포넌트를 템플릿으로 복사/붙여넣고, 렌더()에서 모든 것을 삭제한 후 Import하여 부모 JSX에 추가했지만, 컴포넌트 클래스의 이름은 아직 변경되지 않았습니다.그래서 에러는 다른 컴포넌트에서 발생한 것처럼 보였고, 그 컴포넌트가 에러를 발생시킨 것은 아닙니다.오류 메시지의 일부로 파일 이름을 지정하면 도움이 됩니다.이게 도움이 됐으면 좋겠네요.
, ,, 지, 쪽, 쪽, 다, 다, 다, 다, 다, 다, 다, oh, oh, , . 누가 돌아온다고 했는지 모르겠네요.undefined에러가 발생합니다.
render() {
return this.foo // Where foo is undefined.
}
프로덕션 빌드에서만 동일한 오류가 발생합니다.개발은 괜찮았고, 경고는 없었다.
문제는 댓글 행이었다.
에러
return ( // comment
<div>foo</div>
)
네 알겠습니다
// comment
return (
<div>foo</div>
)
다음 행이 아닌 반환 옆에 괄호를 입력합니다.
틀렸습니다
return
(
statement1
statement2
.......
.......
)
맞아요.
return(
statement1
statement2
.........
.........
)
이것은 기능 컴포넌트를 사용하고 있기 때문에, 「(」) 대신에 이러한 「{}」의 중괄호를 사용하고 있는 것이 원인일 가능성이 있습니다.예: const Main = ( ) > ( ...그러면 당신의 코드는 기본적으로 이 괄호 '()'로 묶어야 합니다.
기능 컴포넌트에서와 같은 오류가 발생하였습니다.
function ShopCard(props) {
const { shops = {} } = useContext(ContextProvider);
return(
shops.map((shop)=>{
<div></div>
})
)
}
대신
function ShopCard(props) {
const { shops = {} } = useContext(ContextProvider);
shops.map((shop)=>{
return(
<div></div>
)
})
}
같은 오류, 다른 상황.누군가 저와 같은 상황에 처했을지도 모르기 때문에 여기에 글을 올립니다.
저는 아래와 같이 콘텍스트 API를 사용하고 있었습니다.
export const withDB = Component => props => {
<DBContext.Consumer>
{db => <Component {...props} db={db} />}
</DBContext.Consumer>
}
따라서 기본적으로 오류 메시지가 답을 제공합니다.
렌더링에서 아무것도 반환되지 않았습니다.일반적으로 반품 명세서가 누락되었음을 의미합니다.
withDB는 html 블록을 반환해야 합니다.하지만 아무것도 돌려주지 않았어코드를 아래와 같이 수정하면 문제가 해결되었습니다.
export const withDB = Component => props => {
return (
<DBContext.Consumer>
{db => <Component {...props} db={db} />}
</DBContext.Consumer>
)
}
같은 에러가 발생하고 있어 파악할 수 없었습니다.기능 구성 요소를 내보낸 다음 앱 구성 요소로 가져왔습니다.기능 컴포넌트를 화살표 기능 포맷으로 설정했는데 오류가 발생하였습니다.곱슬곱슬한 브래지어 안에 "return" 문구를 넣고 "return" ()을 넣고 JSX를 모두 parens 안에 넣었습니다.이것이 누군가에게 유용하고 중복되지 않기를 바랍니다.Stackoverflow는 이 형식을 한 줄로 자동 포맷할 것으로 보이지만, 편집자인 VSCode에서는 여러 줄로 되어 있습니다.별일 아닐 수도 있지만 간결하게 말하고 싶다.
import React from 'react';
const Layout = (props) => {
return (
<>
<div>toolbar, sidedrawer, backdrop</div>
<main>
{props.children}
</main>
</>
);
};
export default Layout;
언급URL : https://stackoverflow.com/questions/46741247/nothing-was-returned-from-render-this-usually-means-a-return-statement-is-missi
'programing' 카테고리의 다른 글
| UI 라우터 리졸바에서 리다이렉트 하는 방법 (0) | 2023.03.16 |
|---|---|
| 유형 스크립트로 대응 - 유형 { }에 유형에서 다음 속성이 누락됨 (0) | 2023.03.11 |
| Wordpress를 CMS로 사용하는 Symfony 2 응용 프로그램 (0) | 2023.03.11 |
| 워드프레스의 사용자 지정 게시 유형에 다중 메타 상자 추가 (0) | 2023.03.11 |
| 플러그인이 활성화 중에 예기치 않은 출력의 X자를 생성했습니다(WordPress). (0) | 2023.03.11 |