반응형
대응 16 경고 "warning.js:36 경고: 서버 HTML에 다음이 포함될 것으로 예상하지 않았습니다.에."
."
서버 측 렌더링에 React 16 베타(반응 파이버)를 사용하고 있습니다.
내가 이걸 이해한다는 게 무슨 뜻이지?
warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>.
익스프레스 응답 변경만 하면 됩니다.
<body>
<div id="root">
${markup}
</div>
</body>
로.
<body>
<div id="root">${markup}</div>
</body>
태그 간 공백 제거
리액트 코드에서 이 에러를 찾아보면 SSR html을 리히드화할 수 없을 때 이 에러가 발생하는 것 같습니다.
따라서 처음에 클라이언트와 서버에서 다른 트리를 렌더링하게 됩니다.
Next.js에서 Modal을 사용하다가 동일한 경고를 받았습니다.저는 메인 페이지에 팝업을 만드는 작업을 하고 있었습니다.
해결책을 찾았어요모달의 show 상태가 최초로 실현되면 이 경고가 발생합니다.그래서 처음에 정의하지 않고 페이지 렌더링 후에 true로 설정했습니다.코드는 다음과 같습니다.
const [modalShow, setModalShow] = React.useState();
useEffect(() => {
if ( modalShow === undefined ) {
setModalShow(true)
}
}, [modalShow])
이 문제를 해결했습니다. 이 문제를 해결했습니다.
<div>
<Header />
{children}
</div>
다음과 같이 입력합니다.
<div>
<Header />
<div>{children}</div>
</div>
내 문제는 반응할 수 있었다.사용된 코드LoadableComponent클라이언트의 각 React-Component를 감싸는 클라이언트 전용입니다.
클라이언트와 서버가 같은 HTML을 표시했기 때문에 원인을 찾기가 어려웠습니다.
마이솔루션:
- 로 업그레이드하다.
node 16.x - 반응 부하를 제거하다
- 를 사용하여 모든 컴포넌트를 로드하다
import
언급URL : https://stackoverflow.com/questions/45350360/react-16-warning-warning-js36-warning-did-not-expect-server-html-to-contain-a
반응형
'source' 카테고리의 다른 글
| Angular에서 모듈과 네임스페이스/이름 충돌JS (0) | 2023.04.04 |
|---|---|
| ReferenceError getValuesOf자동 채우기 입력, 변수를 찾을 수 없습니다.지불자동 채우기 구성 (0) | 2023.03.25 |
| 가치가 존재하지 않는 경우에만 어레이에 lodash push를 사용합니까? (0) | 2023.03.25 |
| MUI에서 원색 및 보조 색상 변경 (0) | 2023.03.25 |
| ng-options를 사용하여 값 내의 변수 유형을 억제하려면 어떻게 해야 합니까? (0) | 2023.03.25 |