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的错误。当我只使用response时，什么都没有发生，并且由于状态为空，文本仅显示为“没有数据”。

如何将文本从端点转换为组件状态并显示在屏幕上？

谢谢！

Answer 1

response是Response对象。 fetch将在读取HTTP响应 header 而不是响应正文时为您提供访问权限-这就是为什么您必须在await上response.json()，因为您无法在传输完成之前解析正文数据。

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

这似乎有点不直观，但这是有充分理由的-因为一旦开始传输响应，您会收到Response，因此您可以根据状态/ HTTP标头采取措施，而其余响应仍在加载。

Answer 2

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

我建议您在console.log(res)中插入.then()来查看返回的内容-如果未返回任何内容，我将再次检查您是否在提供的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();

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

3 个答案: