내 구성 요소의 렌더링 기능에는 다음이 있습니다.
render() {
const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
});
return (
<div>
...
<ul>
{items}
</ul>
...
</div>
);
}
<li>
요소를 클릭하면 다음과 같은 오류가 발생합니다.
잡히지 않는 오류 : 불변 위반 : 객체가 React 자식으로 유효하지 않음 (발견 : {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, type, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX) , screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, 버튼, 버튼, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). 자식 컬렉션을 렌더링하려면 대신 배열을 사용하거나 React 애드온에서 createFragment (object)를 사용하여 개체를 래핑하십시오. 의 렌더링 방법을 확인하십시오
Welcome
.
내가로 변경하는 경우 this.onItemClick.bind(this, item)
에 (e) => onItemClick(e, item)
지도 기능 모든 작품 안에 예상대로.
누군가 내가 잘못하고있는 것을 설명하고 왜이 오류가 발생하는지 설명 할 수 있다면 좋을 것입니다
업데이트 1 :
onItemClick 함수는 다음과 같으며 this.setState를 제거하면 오류가 사라집니다.
onItemClick(e, item) {
this.setState({
lang: item,
});
}
그러나이 구성 요소의 상태를 업데이트해야 하므로이 줄을 제거 할 수 없습니다
답변
이 오류가 발생하여 의도하지 않게 JSX 코드에 Object를 포함하여 문자열 값이 될 것으로 예상되었습니다.
return (
<BreadcrumbItem href={routeString}>
{breadcrumbElement}
</BreadcrumbItem>
)
breadcrumbElement
예전에는 문자열 이었지만 리 팩터로 인해 Object가되었습니다. 불행히도 React의 오류 메시지는 문제가 발생한 줄을 알려주는 데 도움이되지 않았습니다. 구성 요소에 “props”가 전달되는 것을 인식하고 문제가되는 코드를 찾을 때까지 스택 추적을 따라야했습니다.
문자열 값인 객체의 속성을 참조하거나 원하는 문자열 표현으로 객체를 변환해야합니다. JSON.stringify
실제로 객체의 내용을 보려는 경우 한 가지 옵션이있을 수 있습니다 .
답변
따라서 createdAt
Date 객체 인 속성 을 표시하려고 할 때이 오류가 발생했습니다 . 이렇게 .toString()
마지막에 연결 하면 변환이 수행되고 오류가 제거됩니다. 다른 사람이 같은 문제를 겪을 경우를 대비하여 가능한 답변으로 게시하십시오.
{this.props.task.createdAt.toString()}
답변
방금 같은 오류가 발생했지만 다른 실수로 인해 다음과 같이 이중 괄호를 사용했습니다.
{{count}}
count
올바른 값 대신에 값을 삽입하려면 다음을 수행하십시오.
{count}
컴파일러는 아마도으로 전환했습니다 {{count: count}}
. 즉, Object를 React 자식으로 삽입하려고합니다.
답변
오늘 같은 문제가 있었기 때문에 이것에 추가 할 것이라고 생각했습니다. <div>
태그로 묶었을 때 함수 만 반환했기 때문이라고 밝혀졌습니다. 아래와 같이 작동했습니다.
renderGallery() {
const gallerySection = galleries.map((gallery, i) => {
return (
<div>
...
</div>
);
});
return (
{gallerySection}
);
}
위의 오류가 발생했습니다. return()
섹션을 다음과 같이 변경하여 문제를 해결했습니다 .
return (
<div>
{gallerySection}
</div>
);
… 또는 간단히 :
return gallerySection
답변
반응 자식 (단수) 은 객체가 아닌 기본 데이터 유형의 유형 이거나 JSX 태그 일 수 있습니다 (이 경우에는 아닙니다) . 개발시 Proptypes 패키지를 사용하여 유효성 검사를 수행하십시오.
아이디어로 당신을 표현하는 간단한 코드 스 니펫 (JSX) 비교 :
-
오류 : 객체가 자식으로 전달되었습니다.
<div> {/* item is object with user's name and its other details on it */} {items.map((item, index) => { return <div key={index}> --item object invalid as react child--->>>{item}</div>; })} </div>
-
오류없이 : 객체의 속성 ( 기본적이어야 함, 즉 문자열 값 또는 정수 값 )이 자식으로 전달됩니다.
<div> {/* item is object with user's name and its other details on it */} {items.map((item, index) => { return <div key={index}> --note the name property is primitive--->{item.name}</div>; })} </div>
TLDR; (아래 소스에서) : JSX에서 렌더링하는 모든 항목이 React를 사용할 때 객체가 아닌 기본 요소인지 확인하십시오. 이 오류는 일반적으로 이벤트 디스패치와 관련된 함수에 예기치 않은 오브젝트 유형 (예 : 문자열을 전달해야 할 때 오브젝트 전달)이 제공되었거나 구성 요소의 JSX 일부가 기본 요소 (예 : this.props)를 참조하지 않기 때문에 발생합니다. vs this.props.name).
출처-codingbismuth.com
답변
Mine은 render () 함수의 return 문 안에 HTML 요소를 포함하는 변수 주위에 중괄호를 불필요하게 배치하는 것과 관련이있었습니다. 이것은 React가 그것을 요소가 아닌 객체로 취급하게했습니다.
render() {
let element = (
<div className="some-class">
<span>Some text</span>
</div>
);
return (
{element}
)
}
요소에서 중괄호를 제거하면 오류가 사라지고 요소가 올바르게 렌더링됩니다.
답변
광산은 프리젠 테이션 구성 요소로 전송되는 소품 주위의 중괄호를 잊어 버렸습니다.
전에:
const TypeAheadInput = (name, options, onChange, value, error) => {
후
const TypeAheadInput = ({name, options, onChange, value, error}) => {