Вспомогательная функция с аргументом, вызываемым перед монтированием компонента в React Native - PullRequest
Новая
       24

Вспомогательная функция с аргументом, вызываемым перед монтированием компонента в React Native

0 голосов
/ 01 октября 2018

Я проверяю, что мой экспресс-сервер работает в React Native, вызывая простую вспомогательную функцию в моем компоненте.

Это вспомогательная функция: 

//Helper functions
  testFetch(msg) {
    console.log("Msg: ", msg);
    fetch("http://localhost:5000", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      }
    })
      .then(response => response.json())
      .then(responseJson => {
        console.log("Express response: ", responseJson);
        this.setState({ myText: responseJson });
      })
      .catch(error => {
        console.error("ERROR: Fetch (Entry.js, testFetch) ", error.message);
      });
  }

Я пытался назвать это так: 

<Button title="Test Fetch" onPress={this.testFetch} />
<Button title="Test Fetch" onPress={this.testFetch('Here I am')} />

В первом случае проблем нет, компонентрендеринга и функция запускается, когда я нажимаю кнопку и работает правильно.

Однако, если я отправляю аргумент, такой как второй случай, кажется, что вспомогательная функция выполняется до рендеринга компонента и (если мой экспресс-сервер не запущен) выдает ошибку в блоке catch безпоказывая мой экран.

Что мне не хватает?Вспомогательная функция, кажется, выполняется при монтировании, если я вызываю ее с аргументом (а это не то, что я хочу).Я пользуюсь симулятором, поэтому не уверен, что с этим что-то странное?

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

Спасибо!

1 Ответ

0 голосов
/ 01 октября 2018

Это потому, что вы немедленно вызвали его в шаблоне.

Заменить

<Button title="Test Fetch" onPress={this.testFetch('Here I am')} />

К

<Button title="Test Fetch" onPress={() => this.testFetch('Here I am')} />

Подробнее об этом здесь https://reactjs.org/docs/faq-functions.html

...