javascript - 如何使 React 组件可以访问并且需要异步数据才能使用的变量？

Question

我了解如何使用this.props.

但是，我似乎无法找到一种方法将值或从数据库异步收集值到将在整个组件中使用的
变量，加载后我无法更改此变量，它必须在加载之前加载render 方法，因为一旦加载就不允许更改。

我的意思是这次尝试 1

import React from "react";
import ReactDOM from "react-dom";

let my_variable = "";
fetch("url", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({})
})
  .then(data => data.json())
  .then(result => {
    return (my_variable = result);
  });


--------------------new way-------------------------
const my_variable = fetch("url", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({})
})
  .then(data => data.json())
  .then(result => {
    return (result);
  });
-------------------------------------------------

class MyClass extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {};
  }

  render() {
    return (
      <>
        <NewElement variableNeeded={my_variable} />
      </>
    );
  }
}

export default MyClass;

当然，它不起作用，因为空变量会命中组件并且无法更新。

选项 B：

import React from "react";
import ReactDOM from "react-dom";

class MyClass extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {};
  }

  render() {
    return (
      <>
        <NewElement variableNeeded={this.props.my_variable} />
      </>
    );
  }
}
export default MyClass;

再次不起作用，这个类是另一个类的子类，变量值是在 onComponentDidMount() 中收集的，渲染方法首先被命中，所以我不知道如何收集数据然后传递它。

如果有人可以帮助我，我将不胜感激

标签： javascriptreactjsasynchronous

Answer 1

要获取数据：

componentDidMount() {
    fetch('url', /* your config here */).then(data => {
        return data.json();
    }).then(json => {
        this.setState({ variable: json });
    });
}

...然后在render方法中...

render() {
    const { variable } = this.state;

    return (
        <>
            { variable && <NewElement variableNeeded={variable} /> }
        </>
    );
}