Как правильно отобразить компонент React с Flask API - PullRequest
1 голос
/ 01 февраля 2020

Это моя первая попытка построить RESTful Flask API с React на внешнем интерфейсе. Я столкнулся с проблемой рендеринга компонента React при переходе по URL /login. вместо этого я получаю объект JSON, который возвращается с сервера. Вместо этого я хочу визуализировать LoginForm компоненты, где я делаю запрос к /login и печатать данные внутри компонента React. Как мне этого добиться?

Это моя файловая структура.

app/main/auth/views.py

@auth.route('/login', methods=['GET', 'POST'])
def login():
   return jsonify(message="Login Page"), 200

Внутри /dist папки у меня есть bundled.js файл

Внутри /client папка является основной index.html, куда я включаю bundled.js файл

app/__init__py файл:

def create_app(config_name):
    app = Flask(__name__, instance_relative_config=True,
                static_folder="../client/dist",
                template_folder="../client")

   ... rest configs
   return app

Внешний интерфейс:

client/static/js/components/LoginForm.js файл

class LoginForm extends Component {

  constructor(props) {
    super(props);
    this.state = {
      message: {}
    }
  }

  componentDidMount() {
    const url = '/login';
    fetch(url)
      .then((res) => res.json())
      .then(data => {
        this.setState({
          message: data
        })
      })
  }

  render() {

    let items = this.state.message;

    return (
      <div className="content-section">
          <h1>{items.message}</h1>
          <form method="POST">
            <div className="form-group">
              <input type="email" className="form-control" />
            </div>
            <div className="form-group">
              <input type="password" className="form-control" />
            </div>
            <input type="submit" className="btn btn-primary" value="Login" />
          </form>
      </div>
    )
  }
}

export default LoginForm;

components/App.js

Class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <div className="container">
          <Route path="/login" component={LoginForm} />
        </div>
      </BrowserRouter>
    )
  }
}

index.js

ReactDOM.render(<App />, document.getElementById("app"));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...