불변 위반:텍스트 문자열은 구성 요소 내에서 렌더링되어야 합니다.
RN 0.54에서 0.57로 업그레이드했는데 리액트 네이티브 엘리먼트를 사용해서 앱이 거의 망했습니다.
는 했습니다.TextInput기본적으로 오류 메시지를 스타일링하고 오류 메시지를 설정할 수 있는 소품을 사용할 수 있는 컴포넌트.매우 편리합니다. 하지만 업그레이드를 통해 이 문제들이 해결되었고, 이 오류가 발생했습니다.
따라서 해당 코드를 삭제하면 오류가 사라지지만 이 코드를 실행해도 여전히 문제가 발생합니다.
{ this.state.event.cards[i].fields[j].error &&
<Text style={{ color: '#e74c3c', fontSize: 14, paddingLeft: 5 }}>
{this.state.event.cards[i].fields[j].error}
</Text>
}
텍스트 입력에 입력을 시작하면 오류 메시지가 빈 문자열로 설정되므로 오류가 반환되면 필드에 입력하면 오류가 사라집니다.
바로.this.state.event.cards[i].fields[j].error문자열이 되고 이 오류를 반환받습니다.그러나 오류가 있는지 확인한 다음 오류를 표시하거나 최소한 시도합니다.
또 다른 눈들은 이것에 대해 감사할 것입니다.
이 일로 제 발에 총을 너무 많이 쐈어요 그래서 다음 사람이...
당신이 볼때마다
Invariant Violation: Text strings must be rendered within a <Text> component
99%의 경우 3년 단위가 아닌 &&만 조건부 렌더링을 사용하는 것이 원인이 될 것입니다. : statements. 왜죠?왜냐하면 당신의 상태가 정의되지 않은 것으로 결정되면, 안전하게 빈 공간을 보여주고 당신의 생명을 지옥의 붉은 화면으로부터 구할 수 있는 null이나 빈 배열이 아닌, 그곳에는 구성 요소가 없기 때문입니다.
논리 조건부 렌더링을 모두 3인 렌더링으로 변경합니다.
즉:
하지말기
widgetNumber === 10 && <MyComponent />
두두
widgetNumber === 10 ? <MyComponent /> : null
매번.부탁합니다.리액티브 네이티브를 사랑하기 위해서.
이것은 또한 당신이 다음과 같은 경우에 발생합니다./* Comments */n에return()기능.
는 한 가 잘 this.state.error === undefined또는 빈 문자열이 아닙니다.
render() {
return (
<View>
{this.state.error &&
<Text>
Error message: {this.state.error}
</Text>
}
</View>
);
}
를 빈 로합니다. ' 로합니다.Invariant Violation: Text strings must be rendered within a <Text> component
을 할 때, 를 하기 입니다.this.state.error === '' 빈 즉 이 됩니다가(가) 합니다. 즉 ''. 이는 다음을 야기합니다.Invariant Violation: Text strings must be rendered within a <Text> component
{this.state.error &&
<Text>
Error message: {this.state.error}
</Text>
}
.this.state.error === undefined , 됩니다.undefined이고,
사용합니다.!!내가 뱅뱅 오퍼레이터라고 부르는 것은 부울리안라이징입니다.error있을 그러면 되겠군요.
{!!this.state.error && (
<Text>
Error message: {this.state.error}
</Text>
)}
한다면error 빈 )이며,다음)로. 다음으로 래핑해야 합니다.<Text />웹과는 다른 리액트 네이티브.
이 문제는 & 연산자에서 문자열 또는 숫자 값을 사용할 때 발생합니다.
예를 들어,
const [a, setA] = useState('')
const [b, setB] = useState(0)
둘 다.a && <View />그리고.b && <View />이 오류를 던집니다.
로서 이 .true/false, null,아니면undefined자료형.
하는 대신string and numeric data types다로 .Boolean형.
올바른 구현 방법은 다음과 같습니다.
!!a && <View />그리고.!!b && <View />
아니면
!a && <View />그리고.!b && <View />
외부 구성요소 사이의 공백 삭제
<Text></Text>
Ex. 사용하지 않음
<Button> <Text>hi</Text></Button>
그러나 사용
<Button><Text>hi</Text></Button>
저의 경우, Text tag의 클로징 끝에 세미콜론 ';'이 존재하여 이 오류가 발생하였습니다.위의 적절한 답을 얻지 못한 모든 사람들은 이것을 시도해 보세요.세미콜론을 제거하여 오류가 사라졌습니다.
위 이미지에서 언급한 바와 같이 세미콜론 ';'로 인해 저도 이 오류가 발생하였습니다.
저 같은 경우는 JSX 구문 끝에 있는 세미콜론이었습니다.
// wrong:
<View>
<MyComponent>;
</View>
// correct:
<View>
<MyComponent>
</View>
저는 JSX 안에 컬리 브레이스가 열리지 않아서 그런 일이 있었습니다.
<View>
{events.map(event => {
return (
<Card title={event.summary}>
<Text>Date: {event.start.dateTime}</Text>
</Card>
);
})}
} <------------ that was the culprit
</View>
같은 문제가 있었고 @serdasenay의 코멘트는 근본적인 원인을 깨닫게 해주었습니다.
하기 {condition && <Element/>}그 자체로 틀린 것은 아니지만 무슨 일이 일어나고 있는지 아는 것이 중요합니다.
문제의 근원은 논리 단락입니다.하고,&&true동치하지만 하지는 않습니다.true주조되기값, 즉 .그것이 실제로 이 구문의 시작을 허용하는 것입니다.부터.<Element/> 입니다.true한다면condition이다.true , 라는로 합니다.<Element/>
가 때 합니다.false일 때.&&첫 값, 다됩니다.condition 하지만 부울로 주조되기 전에 말입니다.그래서 만약 당신이 직접 문자열이나 숫자를 사용한다면condition평가해 보면 다음과 같습니다.false논리식은 그 문자열이나 숫자를 평가합니다.예:{array.length && <List/>}합니다에 대한 빈 합니다.{0}오류가 발생합니다.
은 입니다를 하는 입니다.condition는 실제 부울 값입니다(React가 부울을 렌더링하는 것을 처리할 수 있기 때문에 작동합니다). - 리액트가 부울을 무시한다고 생각합니다.따라서 다음과 같은 작업을 수행합니다.{array.length > 0 && <List/>}
저에게는 IntelliSense의 잘못된 수입이었습니다.'반응 네이티브'가 아닌 '반응 네이티브 웹'에서 버튼을 가져왔습니다.일단 전화기에서 실행하면 이 오류가 발생합니다.
이는 인라인 조건부 렌더링을 수행할 때 일반적으로 발생합니다.다 사이의 .Text그리고 당신의 상태는 아래와 같습니다.
{ this.state.event.cards[i].fields[j].error && <Text style={{ color: '#e74c3c', fontSize: 14, paddingLeft: 5 }}>
{this.state.event.cards[i].fields[j].error}
</Text>
}
여기서 다른 답변을 읽어보면, 이 오류 메시지는 모호하며 다양한 이유로 표시됩니다.저는 댓글을 쓸 때나 심지어 뷰 내의 작은 여백을 쓸 때에도 그것을 얻었습니다. (크레이지 예...)
예를 들어 다음과 같습니다.<View> {props.children} </View>
다음으로 변경해야 합니다.<View>{props.children}</View>
저 같은 경우는 이렇게 자기마감 요소 뒤에 임의로 쓴 편지였습니다.
<Card />r
저는 ';'가 뒤로 밀려서 이런 오류가 있었습니다.
<Divider orientation="horizontal" />;
받는 사람:
<Divider orientation="horizontal" />
제 경우 보기 태그와 텍스트 태그 사이의 공간을 제거해야 했습니다.
<View> <Text style={{ color: "white"}}>Start</Text> </View>
로.
<View><Text style={{ color: "white"}}>Start</Text></View>
이고 내 , 를입니다 텍스트, 에서 플랫리스트를 이었습니다.react-native-webd이 react-native, vs 코드에서 자동으로 발생하는데 왜 그런지 모르겠습니다!
하지 마
import { Text, FlatList, StyleSheet } from "react-native-web";
DO
import { Text, FlatList, StyleSheet } from "react-native";
와 (같은 줄에) 사이에 공백이 있으면 이 오류도 발생할 수 있습니다.
**eg: <Text> <Button>click me<Button><Text>**
^(make sure that you have no space if it is in same line)
줄이 같으면 두 태그 사이의 간격을 피해야 합니다.
때로는 저장할 때 더 예뻐지거나 코드 포맷터가 이를 JSX에 추가합니다.
<View>
{' '}
</View>
이걸 치우면 괜찮을 겁니다.
VSCode에서 동일한 오류 메시지가 발생했지만 /* 의견 */ 또는 표현이 없습니다.이 솔루션은 텍스트 편집이나 단어와 같은 형식을 제거하고 코드를 다시 vScode에 복사하여 붙여넣는 것이었습니다.
왜 또는 어떻게 작동하는지는 모르겠지만(아마도 VSCode에서 구체적으로 발생할 수 있음), 포맷 문제는 graphql의 SDL에서도 경험한 바와 같습니다.
{this.state.password.length > 0 && <Text>}
이렇게 하면 정의되지 않은 상태로 반환되므로 동일한 오류가 발생합니다.이렇게 만들 수 있습니다.
{this.state.password.length > ? <Text> : null}
초기값이 빈 문자열인 경우 아래 코드를 사용합니다.또는 초기값을 조건부로 확인합니다.여기서 나는 에러가 비어있지 않을 때 조건부로 체크하고 에러를 표시합니다.
{this.state.error !== '' && (
<Text>
{this.state.error}
</Text>
)}
를 .>터치 가능한 Opacity 반응 네이티브 터치 가능한 Opacity.
잘못된 코드:
<TouchableOpacity>
onPress={() => this.setState({ showOverLay: true })}
<Image
source={cardImage}
resizeMode="contain"
style={[
styles.cardImage, cardImageStyle
]}
/>
</TouchableOpacity>
좋은 코드 :
<TouchableOpacity
onPress={() => this.setState({ showOverLay: true })}>
<Image
source={cardImage}
resizeMode="contain"
style={[
styles.cardImage, cardImageStyle
]}
/>
</TouchableOpacity>
이하지 않습니다.'''() .다음으로 변경합니다.null
작동하지 않음:
<ButtonBorderLarge
buttonText={'Choose certificate'}
onPressHandler={pickCertificate}
icon={docName ? 'check' : ''}
/>
작업:
<ButtonBorderLarge
buttonText={'Choose certificate'}
onPressHandler={pickCertificate}
icon={docName ? 'check' : null}
/>
오류는 상태 개체를 빈 문자열로 초기화했기 때문입니다.
const [category, setCategory] = useState("")
상태가 개체가 될 경우 처음에 null로 설정해야 합니다.
const [category, setCategory] = useState(null)
해결책
!!를 통해 이 문제를 해결할 수 있습니다.
{!!error && <Text>{error}</Text>}
설명.
- 만약 우리가 싱글 not을 사용한다면
!다를 합니다.""면는입니다가 !!"입니다true을를)로 이므로 빈 .!"" => true
<React.Fragment>
{this.props.title ? (
<React.Fragment>
<Text> true </Text>
</React.Fragment>
):(
<React.Fragment>
<Text> false </Text>
<Text> false </Text>
</React.Fragment>
보기 태그나 반응으로 랩을 해야 합니다.fragment tag 및 inside 또한 요소가 하나 이상인 경우 랩이 필요합니다.
시도해 보십시오.
<>
<View>
{this.state.error &&
<Text>
Error message: {this.state.error}
</Text>
</View>
</>
In my case some part of the code was out side the text component for example:
<RadioForm style={styles.radiobutton}
radio_props={hobbies}
initial={1}
onPress={(value) => {ToastAndroid.show(value.toString(), ToastAndroid.SHORT)}}
buttonSize={4.5}
buttonOuterSize={19}
selectedButtonColor={'green'}
selectedLabelColor={'green'}
labelStyle={{ fontSize: 14, }}
disabled={false}
formHorizontal={true}
/>
<RadioForm
이 위의 행 < Radio Form이 닫혀 있지 않은 상태로 남아 있는 것이 그 이유입니다.
저도 같은 문제가 있었는데 실수로 자식과 {children}과 같은 구성 요소 사이에 공간을 추가했습니다.
참고: {children}에 가까운 공간 제거
<Provider value={something}>{children}</BlogContext.Provider>
언급URL : https://stackoverflow.com/questions/52368342/invariant-violation-text-strings-must-be-rendered-within-a-text-component
'source' 카테고리의 다른 글
| 다중 설정 워드프레스 옵션 페이지 플러그인 (0) | 2023.10.12 |
|---|---|
| 부모의 패딩을 무시하는 절대 포지셔닝 (0) | 2023.10.12 |
| 농담에서 모의 던지기 오류를 적절하게 만드는 방법은? (0) | 2023.10.12 |
| ConstraintLayout 제약 조건 종속 뷰가 사라지면 레이아웃 뷰가 이상하게 동작합니다. (0) | 2023.10.12 |
| 사이트 간 AJAX 요청 (0) | 2023.10.12 |