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

我有一个简单的react组件和express端点，它返回字符串样本数据。我只是想在我的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);

我不确定我是否需要response.json，因为端点只返回纯文本，所以我实际上收到了一个错误，代码SyntaxError:json中的意外标记s位于位置0。当我只使用response时，什么都没有发生，文本显示为没有数据，因为状态为空

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

谢谢

响应是一个对象。读取HTTP响应头时，fetch将允许您访问它，而不是响应体-这就是为什么您必须等待response.json，因为在它完成传输之前，您无法解析体数据

当从响应中读取纯文本时，同样的原则也适用-您需要等待Response.text，以允许响应完成读取。在这种情况下，您还需要修改setState和Error，因为body只是一个字符串，而不是一个对象

---

这可能看起来有点不直观，但这是有充分理由的——因为一旦响应开始传输，您就会收到一个响应，因此您可以在响应的其余部分仍在加载时根据状态/HTTP头采取操作。

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

我建议在您的中抛出一个console.logres。然后查看返回的内容-如果没有返回任何内容，我会再次检查您是否在提供的url上返回

---

您的代码看起来很好，我测试得很快，对我来说很好，这只是正确获取响应数据的问题。

我认为您的错误在这里：

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();

---

响应是什么样子的？您从后端发送一个文本no a jsonfile。。。so const body=wait response.json；给您一个错误，尝试以res.send{file:'sample data'}的形式发送json文件；

const body = await response.text();