Как отобразить данные из бэкэнд-API с помощью stencil.js в зависимости от пользовательского ввода?

Question

Вот мой код Основываясь на пользовательском вводе, я пытаюсь передать входные данные бэкэнд-API и получить соответствующие данные. У меня есть фиктивный API, который я вызываю с помощью Fetch API и храню данные в this.data, Как отобразить содержимое this.data?

Я пытался сделать рендеринг, но не знал, как его использовать. componentDidLoad(), Какой правильный способ для меня сделать это? Я пытался делать if-else в JSX, но не получалось.

Я пытаюсь прочитать много руководств и документации, но не могу решить свою проблему. Как мне этого добиться?

  @State() value: string;
  @State() data: Array<any>;


    handleSubmit(e:any) {
      e.preventDefault()
      console.log(this.value);
      // send data to our backend 
      fetch('https://api.github.com/users/ErvinLlojku')
      .then((response: Response) => response.json())
      .then(response => {
        this.data = response;
        console.log(this.data);
      });
    }

    handleChange(event:any) {
      this.value = event.target.value;
    }

    render() {
      return (
        <div>
            <form onSubmit={(e) => this.handleSubmit(e)}>
            <label>
              Enter Tracking Number:
              <input type="text" value={this.value} onInput={(event) => this.handleChange(event)} />
            </label>
            <input type="submit" value="Submit" />
            </form>
          <div>
            Hi!
            {this.data}
          </div>
        </div>
      );
    }

Answer 1

Попробуйте украсить data с @Prop, Компоненты трафарета перерисовываются при изменении @Prop ценности.