Question

大家好，我想知道每当我尝试从快递发送数据时，我是否总是需要一个状态。

例如，我的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。我也没有在我的fetch中接收任何console.log作为定义。

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

PS。是否也可以从Express发送一些静态文本然后在React前端渲染它？

Answer 1

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

setState 可让 React 知道状态已更改并重新呈现，从而帮助您实现这一目标。如果您将数据存储在此.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 
}

每当我从快递公司发送数据时，我总是需要一个状态

1 个答案: