Question

因此，我尝试将get请求发送到我的节点服务器，该服务器通过发送希望显示在页面上的对象列表进行响应。尝试了许多不同的方法，但我似乎找不到解决方法。另外，如果有任何帮助，我也会通过服务器进行渲染。

客户代码：

class BookTools extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        books: []
    };
    this.handleAdd = this.handleAdd.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
    this.updateList = this.updateList.bind(this);

    fetch('/getbooks').then(function (res) {
        return res.json();
    }).then(function (json) {
        console.log(json);
        const data = JSON.stringify(json);
        console.log(data);
        this.setState({ books: data})
    });
}

由于它是SSR，因此无法使用componentDidMount，而且似乎也无法使componentWillMount正常工作，因此我尝试按照另一个建议的方法在构造函数中进行操作。这两个console.logs都会打印出正确的响应。

我也尝试同时进行this.setState({ books: json.body })和this.setState({ books: json.data })，但没有其他结果。是的，我对节点和表达式的反应还很新

感谢您的帮助：）

Answer 1

这是常见的反应问题。当您使用常规功能时，此上下文将不可用，因此您需要将其绑定或将其更改为箭头功能。

还要确保API返回数据

更改

    fetch('/getbooks').then(function (res) {
          return res.json();
}).then(function (json) {
    console.log(json);
    const data = JSON.stringify(json);
    console.log(data);
    this.setState({ books: data})
});

收件人

   fetch('/getbooks') 
       .then(res => res.json())
       .then(json => {
            console.log(json);
            const data = JSON.stringify(json);
            console.log(data);
            this.setState({ books: data})
   });

或

   fetch('/getbooks')
     .then(function (res) {
         return res.json();
      }.bind(this))
     .then(function (json) {
           console.log(json);
           const data = JSON.stringify(json);
           console.log(data);
           this.setState({ books: data})
   }.bind(this));

反应：数据不会保存到this.state

1 个答案: