Блог

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

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      submitSuccess: false
    };
  }

  onClick = () => {
    console.log("click");
    this.setState({
      isLoading: false,
      submitSuccess: true
    });
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.onClick}>click</button>
        {this.state.isLoading ? (
          <p>loading...</p>
        ) : this.state.submitSuccess ? (
          <p>sucess!</p>
        ) : (
          <p>are you sure?</p>
        )}
      </div>
    );
  }
}
  

То, что я пытаюсь сделать, это приведенный ниже пример:

1. Вы уверены?
2. Загрузка…
3. Успех!

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

Спасибо! 🙂

Исправлено здесь: https://codesandbox.io/s/rln4oz4vwq

Основная идея: установите для загрузки значение false по умолчанию, потому что вы ничего не загружаете. При нажатии кнопки установите для загрузки значение true, как вы есть на самом деле. Затем по завершении асинхронного процесса установите для loading значение false, а для submitSuccess значение true, чтобы указать, что вы закончили.

Код:

 import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      submitSuccess: false
    };
  }

  onClick = () => {
    console.log("click");
    this.setState({
      isLoading: true
    });

    //lets assume you now do some async stuff and after 2 seconds you are done
    setTimeout(() => {
      this.setState({
        isLoading: false,
        submitSuccess: true
      });
    }, 2000);
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.onClick}>click</button>
        {this.state.isLoading ? (
          <p>loading...</p>
        ) : this.state.submitSuccess ? (
          <p>success!</p>
        ) : (
          <p>are you sure?</p>
        )}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);