如何在React组件中从Express端点获取数据？

Question

我有一个简单的react组件，并表达了返回字符串“ sample data”的端点。 我只是想在我的react应用程序中击中该端点并将文本存储在状态中并将其显示在屏幕上。

我的组件：

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的错误SyntaxError: Unexpected token s in JSON at position 0 。 当我只使用response什么都没有发生，并且由于状态为空，因此文本仅显示为“没有数据”。

如何使文本从端点进入组件状态并显示在屏幕上？

谢谢！

Answer 1

response是一个Response对象。 fetch HTTP响应标头后 ，而不是响应正文， fetch将为您提供访问权限，这是您必须await response.json() ，因为您无法在正文数据传输完成之前解析正文数据。

从Response读取纯文本时，也应用相同的原理-您需要await response.text() ，以使响应完成读取。 在这种情况下，您还需要修改setState和Error ，因为body只是一个字符串，而不是对象。

这看起来似乎有点不直观，但这是有充分原因的-因为在响应开始传输后您会立即收到Response ，因此您可以在状态其余部分仍加载的同时根据状态/ HTTP标头采取措施。

Answer 2

我的猜测是您的端点在响应中没有res.data 。

我建议在您的.then()抛出console.log(res)来查看返回的内容-如果未返回任何内容，我将再次检查您是否在提供的url上返回。

您的代码看起来不错，我对其进行了快速测试，对我来说也很好，这只是正确获取响应数据的问题。

Answer 3

我认为您的错误在这里：

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'});

}）;

或如Joe Clay所建议的那样，您可以通过

const body = await response.text();