Как получать данные в компоненте react?

Question

[Moro Zota]

Есть код на flask:

from flask import Flask, jsonify

app = Flask(__name__)

i = [
    {
        'id': 1,
        'title': 'Hello'
    },
    {
        'id': 2,
        'title': 'World'
    }
]

@app.route('/', methods=['GET'])
def get_task():
    return jsonify({'i': i})

if __name__ == '__main__':
    app.run(debug=True)

с массивом который я хочу отобразить в компоненте.
собственно в react, я использую componentDidMount . Но не понимаю, что нужно тут прописывать
и ещё
сервер ранится на локалхосте. В package json я ставлю proxy: номер порта
это правильно?

Comments

[Антон Спирин]

Что конкретно не получается? Код на React где?

[Moro Zota]

Антон Спирин, да. я не понимаю, что именно прописывать в componentDidMount

[Антон Спирин]

Moro Zota,

fetch('/')
      .then(res => res.json())
      .then(data => this.setState({ i: data.i }));

Но лучше использовать библиотеку axios вместо fetch, так как fetch в IE не поддерживается.

Почитать.

[Moro Zota]

Антон Спирин, Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0
вот что получаю

[Антон Спирин]

Moro Zota, сервер возвращает html. Он на том же порту у вас? Если нет то надо так:

fetch('http://localhost:HOMEP_ПОРТА/')
      .then(res => res.json())
      .then(data => this.setState({ i: data.i }));

[Moro Zota]

Спасибо, это помогло. Ошибок нету. Вижу на стороне сервера, что идут запросы. Но почему то реакт ничего не отображает

[Moro Zota]

Антон Спирин, Failed to load localhost:5000/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

моя ошибка в консоли

[Антон Спирин]

Moro Zota, кроссдоменные запросы надо разрешить flask-cors.readthedocs.io/en/latest

[Moro Zota]

Антон Спирин, Спасибо огромное.

[Moro Zota]

Антон Спирин, а где можно подробнее узнать про этот варнинг
почему вообще так происходит

[Антон Спирин]

Moro Zota, попробуйте почитать самые релевантные статьи по этому запросу. Ваши хосты localhost:3000 и localhost:5000 это два разных домена. Отсюда и проблема.
Проблему так же можно решить с помощью nginx. Посмотрите этот ответ.