将变量值从反应构造函数传递到 nodeJS 后端

Question

是否可以将变量值从反应构造函数发布到 nodejs 后端。我们希望在页面加载到 nodejs 时发布某些数据并在后端执行一些功能。

constructor(props) {
        super(props);
        const tokenFetch = localStorage.getItem("JWT");
        const nameFetch = localStorage.getItem("Name");
        this.state = {
            userLoggedIn,
            name: nameFetch,
            tokenFetch: tokenFetch
        };
}

在构造函数中，我们希望将名称和 tokenFetch 发布到后端。

Answer 1

根据constructor 中的 HTTP 请求的响应来决定是否应该呈现某些元素是个坏主意。您不希望您的页面“挂起”，因为请求花费的时间比您预期的要长。

您应该将boolean 标志添加到constructor 中的状态，并根据此标志渲染您想要或不想渲染的元素。然后，你可以在componentDidMount方法中执行你的HTTP请求，然后改变flag：

class MyComponent extends React.Component {

  constructor(props) {
    super(props);
    const tokenFetch = localStorage.getItem("JWT");
    const nameFetch = localStorage.getItem("Name");
    this.state = {
      responseFromServerReceived: false,
      userLoggedIn,
      name: nameFetch,
      tokenFetch: tokenFetch
    };
  }

  componentDidMount() {
    axios({
      method: 'post',
      url: '/whereYouWantToSendData',
      data: { firstName: this.state.nameFetch, token: this.state.tokenFetch }
    }).then(response => {
      // Whatever you want to do with the response;
      this.setState({ responseFromServerReceived: true });
    });
  }

  render() {
    const elementToRender = this.state.responseFromServerReceived
      ? <h1>Hello, the response of the server was received.</h1>
      : <h1>Hello, the response of the server was NOT received yet.</h1>;

    return (
      <div>
        {elementToRender}
      </div>
    );
  }
}