Как получить данные из конечной точки Express в компоненте React?

Question

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

Мой компонент:

class App extends Component {

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

  componentDidMount() {
    this.callBackendAPI()
      .then(res => this.setState({ data: res.data }))
      .catch(err => console.log(err));
  }

  async callBackendAPI() {
    const response = await fetch('/sampleData');
    const body = await response.json();

    if(response.status !== 200) {
      throw Error(body.message)
    }
    return body;
  }

  render() {
    let data = this.state.data || 'there is no data';

    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">{data}</p>
      </div>
    );
  }
}

export default (App);

Конечная точка сервера:

app.get('/sampleData', function(req, res) {
  res.send('sample data');
});

Я не уверен, что мне нужно response.json(), поскольку конечная точка просто возвращает простой текст, на самом деле я получаю ошибку с этим кодом SyntaxError: Unexpected token s in JSON at position 0. Когда я просто использую response, ничего не происходит, и текст просто отображается как "нет данных", так как состояние пустое.

Как я могу получить текст из моей конечной точки в состояние компонентов и отобразить на экране?

Спасибо!

Answer 1

response - это объект Response.fetch даст вам доступ к нему, когда будет прочитан HTTP-ответ header , а не тело ответа - поэтому вам нужно await на response.json(), так как вы не можете разобратьданные тела, пока он не закончил передачу.

Этот же принцип применяется при чтении простого текста из Response - вам нужно await на response.text(), чтобы дать возможность завершить чтение ответа.В этом случае вам также необходимо изменить setState и Error, поскольку body будет просто строкой, а не объектом.

Это может показаться немного неинтуитивным, но этопо уважительной причине - поскольку вы получаете Response, как только начинается передача ответа, вы можете выполнять действия на основе заголовков состояния / HTTP, пока остальная часть ответа все еще загружается.

Answer 2

Я думаю, что ваша ошибка здесь:

app.get('/sampleData', function(req, res) {
   res.send('sample data');
});

вы отправляете текст, а не Json, поэтому при попытке получить данные с помощью

 const body = await response.json();

у вас есть эта ошибка.

, чтобы вы могли изменить свой бэкэнд и отправить объект Json как

app.get('/sampleData', function(req, res) {
   res.send({text:'sample data'});

});

или, как подсказал вам Джо Клэй, вы можете получить текст с помощью

const body = await response.text();

Answer 3

Я предполагаю, что ваша конечная точка не имеет res.data в ответе.

Я бы рекомендовал добавить console.log(res) в ваш .then(), чтобы увидеть, что возвращается - если ничего не возвращается, я бы дважды проверил, что вы возвращаетесь по указанному URL.

Ваш код выглядит хорошо, я быстро его проверил, и мне он показался хорошим, просто вопрос правильного получения данных ответов.