Блог

Главная - Вопросы по программированию - Как предотвратить визуализацию компонента при первом запуске

Как предотвратить визуализацию компонента при первом запуске

#react-native

Вопрос:

Я создаю приложение на языке react native, и мне нужно запретить рендеринг одного из компонентов при первом запуске.

Если я задам логическую переменную, значение будет постоянно меняться каждый раз, когда компонент должен отображаться.

 const [firstRun, setFirstRun] = useState(true)

    <View >
          {(firstRun != true) (
          <p> Show component! </p>
          )
          setFirstRun(false);
          }
    </View>

ПРАВКА: Я пытаюсь таким образом, в этом случае это может сработать, но я получаю ошибку консоли. Как я могу ограничить запуск setState только 1 раз?

     firstRun = 0;
    
        <View >
           {(this.firstRun != 0) amp;amp;
            <View >
            <p> something </p>
            </View >
           {this.setState({ firstRun: this.state.firstRun   1 })}
        </View>

Ошибка: Превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы.

Комментарии:

1. Вы имеете в виду — вы хотите, чтобы система запомнила, что был выполнен первый запуск, даже если ваш смартфон убил приложение и перезапустил приложение, которое оно запомнит ? (или просто когда вы переключаете экраны ? — при условии, что ваше приложение имеет несколько экранов )

2. Откройте приложение — (первый запуск > не отображать компонент) — нажмите кнопку — компонент визуализации, если вы убьете приложение, приведенная выше строка начнется снова

3. Пожалуйста, также опубликуйте коды на своей кнопке, чтобы увидеть, что вы пытаетесь сделать. Спасибо.

4. Обновил тему, извините за мой плохой английский, может быть, теперь более понятно, чего я пытаюсь достичь.

5. Вы поместили вышеуказанное представление в блок «componentWillUpdate или componentDidUpdate»? (или поместите представление в функцию, которая будет вызвана «componentWillUpdate или componentDidUpdate» ????

Ответ №1:

Вы можете просто поместить необходимые данные (например, отобразить слово «кен») в отдельную функцию, а затем использовать состояние, чтобы определить, что отображать в этой функции.

  1. установите состояние =0 для «ken1» в конструкторе
  2. нажмите кнопку, которая обновит состояние до 1
  3. функция kentest отобразит значение null, если ken1=0 и ken1 <> 0, поэтому нажатие кнопки может выполнить то, что вы хотите (изначально ничего не отображается, но после первого запуска отобразится).

Вот рабочий пример:

 import React, { Component } from "react";
import { View, Text, Button } from "react-native";

export default class test extends Component {
  constructor() {
    super();
    this.state = {
      ken1: 0,
    };
  }

  kentest() {
    if (this.state.ken1 == 0) {
      return null;
    } else {
      return "ken";
    }
  }

  increasecount() {
    this.setState({ ken1: 1 });
  }

  render() {
    return (
      <View>
        {this.kentest()}
        <Text> something </Text>
        <Button title="Click" onPress={() => this.increasecount()} />
      </View>
    );
  }
}

Вы также можете просмотреть результат здесь:
https://snack.expo.io/tjzplrbgx

Метки: