每当我从快递发送数据以做出反应时，我是否总是需要一个状态

Question

大家好，我想知道当我尝试从 express 发送数据以做出反应时，我是否总是需要一个状态。

例如，我这里有一个 server.js 文件：

const express = require('express');
const router = express.Router();

router.get('/', (req, res, next) =>{
  res.send({'name': 'bella'})
});

module.exports = router;

这只是将我发送到屏幕上，当我尝试通过 localhost 3000 在我的反应中渲染和使用它时，我尝试使用它：

class MainApp extends React{

  componentDidMount() {
    this.getInitial();
  }

  getInitial() {
    fetch('/')
    .then((resp) => resp.json())
    .then(data => console.log('got the data back >>>>>>>>', data))
    .catch((err) => console.log(err));
  }

  render(){
    return (
      <div>
        <h1>HELLO WORLD FROM REACT CLIENT FRONTEND {data.name}!</h1>
      </div>
    );
  }
}

不幸的是，这不起作用，似乎服务器是正在呈现的服务器，而不是前端的反应文件 - localhost:3000。我也没有收到我获取时定义的任何 console.log。

有什么想法吗？对不起，我只是好奇和新手。提前致谢！

附言。是否也可以从 Express 发送一些静态文本，然后在 React 前端呈现？

Answer 1

是的，您确实需要一个状态。您需要让 React 知道何时再次调用 render 方法。

setState 通过让 React 知道 state 已更改并重新渲染 来帮助您做到这一点。如果您将数据存储在 this.data 中，React 不会知道发生了什么变化

你应该把你的代码更新成这样的

constructor(props) {
  super(props);

  this.state = {
    data: null
  };
}  


getInitial() {
  fetch('/')
    .then((resp) => resp.json())
    .then(data => {
      this.setState({ data });
    })
    .catch((err) => {
      console.log(err) 
      // You can also setState here to display an error message
    });
}

render() { 
  // You have access to this.state.data 
}