Получение текстового компонента ошибки должно быть отображено

Question

  constructor(props: Props) {
    super(props);
    this.state = {
      SwitchInfo:''
    };
  }

      _renderContent = section => {

    const Clicked = () => {
       if(this.state.SwitchInfo == '0'){
           return<View>
            <Text>{section.id}</Text>
            </View>
       }
       else{
         return <View>
          <Text>{section.id}</Text>
          </View>
       }
     }


    return (
      <View style ={ styles.backgroundswitch} >
      <SwitchSelector
          initial={0}
          height = {25}
          onPress={(value) => this.setState({ SwitchInfo: value })} //{Clicked(value)}}
          textColor={theme.COLORS.MUTED} //'#7a44cf'
          selectedColor={theme.COLORS.WHITE}
          buttonColor={theme.COLORS.ERROR}
          borderColor={theme.COLORS.ERROR}
          hasPadding
          options={[
            { label: "Info", value: "0"  },
            { label: "Error Log",value: "1" }
          ]}
        />
      <View>Clicked()</View>
      </View>
    );
  };

Я хочу использовать переключатель Switched для отображения различных данных API при нажатии на вкладку переключателя. Я могу получить данные и показать требуемый вывод в терминале (используя операторы console.log ()), но я не могу вернуть или показать текст в мобильном интерфейсе.

Получение ошибки: Получение текстового компонента ошибки должен быть отрендерен Я пытался добавить рендер в нажатую функцию, все еще получая ошибку.

Answer 1

Вы должны добавить код в фигурных скобках в JSX <View>{Clicked()}</View>, а не просто <View>Clicked()</View>, который, конечно, будет интерпретироваться как текст.

Правильный синтаксис:

<SwitchSelector
  initial={0}
  height = {25}
  onPress={(value) => this.setState({ SwitchInfo: value })} //{Clicked(value)}}
  textColor={theme.COLORS.MUTED} //'#7a44cf'
  selectedColor={theme.COLORS.WHITE}
  buttonColor={theme.COLORS.ERROR}
  borderColor={theme.COLORS.ERROR}
  hasPadding
  options={[
    { label: "Info", value: "0"  },
    { label: "Error Log",value: "1" }
  ]}
/>
  <View>{Clicked()}</View>
</SwitchSelector>