Как сделать переменную, доступную компоненту React и нуждающуюся в асинхронных данных?

Question

Я понимаю, как передавать данные от компонента к компоненту, используя this.props.

Однако я не могу найти способ передать значения или собрать значения асинхронно, скажем, из базы данных в переменную, которая будет использоваться во всем компоненте,
Я не могу изменить эту переменную после загрузки он должен быть загружен до метода рендеринга, поскольку его нельзя изменять после загрузки.

Что я имею в виду под этой попыткой 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 (), сначала был вызван метод render, поэтому я не знаю, как его собрать. затем данные передают.

Если бы кто-нибудь мог мне помочь с этим, я был бы очень признателен

Answer 1

Я не уверен, что это тоже нормально, но теперь я не получаю сообщение от компонента, что он перерисовывается, используя метод A, и изменяю верхнюю часть на следующее

--------------------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);
  });
-------------------------------------------------

Answer 2

Для извлечения данных:

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} /> }
        </>
    );
}

Answer 3

для обработки сбора асинхронных данных откуда-то, вам нужно использовать жизненные циклы React, например:

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

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

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

export default MyClass;