Как избежать текстовой строки Должны быть визуализированы в рамках проблемы <Text>компонента? - PullRequest
Новая
       41

Как избежать текстовой строки Должны быть визуализированы в рамках проблемы <Text>компонента?

0 голосов
/ 18 декабря 2018

Я получаю следующую ошибку:

Uncaught Ошибка: Инвариантное нарушение: Текстовая строка должна быть визуализирована в компоненте.эта ошибка находится по адресу: в RCTView в RCTView в p in v в RCTView в RCTView в c

Код: 

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

export default class App extends React.Component {
  state = {
    placeName: "",
    places: []
  }
  placeNameChangedHandler = val => {
    this.setState({
      placeName: val
    });
  };

  placeSubmitHandler = () => {
    if (this.state.placeName.trim() === "") {
      return;
    }
    this.setState(prevState => {
      return {
        places: prevState.places.concat(prevState.placeName)
      };
    });
  };

  render() {
    const placesOutput = this.state.places.map((place,i) => (
      <Text key={i}> 
       </Text>
    ));
    return (
      <View style={styles.container}>
        <View style={styles.inputContainer}>
          <TextInput
            placeholder="Enter Your Name?"
            defaultValue={this.state.placeName}
            onChangeText={this.placeNameChangedHandler}
            style={styles.PlaceInput}

          ></TextInput>
          <Button
            title="Add"
            style={styles.placeButton}
            onPress={this.placeSubmitHandler} />
        </View>
        <View>  </View>
      </View>

    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 26,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: "flex-start"
  },
  inputContainer: {
    // flex:1,
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%"
  },
  PlaceInput: {
    width: "70%"
  },
  placeButton: {
    width: "30%"
  }
});

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

На самом деле, Самозакрытие для компонентов, работающих нормально для меня, как показано ниже: 

<View/>

Вместо: 

 <View> </View>

И 

<TextInput
            placeholder="Enter Your Name?"
            defaultValue={this.state.placeName}
            onChangeText={this.placeNameChangedHandler}
            style={styles.PlaceInput}
          />

Вместоиз: 

  <TextInput
            placeholder="Enter Your Name?"
            defaultValue={this.state.placeName}
            onChangeText={this.placeNameChangedHandler}
            style={styles.PlaceInput}
          ></TextInput>
0 голосов
/ 18 декабря 2018

Я считаю, что это связано с использованием функции map (), если вы используете ее для JSX, вы должны явно вернуть (неявный возврат для JSX почему-то не поддерживается): 

render() {
  const placesOutput = this.state.places.map((place,i) => {
    return(<Text key={i}> </Text>);
 })

Но яне видите, что вы делаете с этой переменной placeOutput?

...