Реагировать на запрос выборки, возвращая пустой массив

Question

У меня есть 3D-глобус, который при нажатии на страну возвращает наложение пользователей.

Ранее у меня все работало, только файл случайных, ложных пользовательских данных в локальном файле. Однако теперь я получил реальную базу данных (AWS одну), и я не могу получить извлечение, чтобы вернуть то, что мне нужно. Он должен принять сигнал от щелчка по стране, затем вернуть список пользователей и показать их во всплывающем окне.

На данный момент я забрал реальную базу данных (конфиденциально), но она работает правильно на почтальоне и упрощенном запросе на выборку, который я создал. Кажется, он не работает в более широком контексте этого приложения.

На этом этапе он не прерывается, а просто возвращает пустой массив в консоли.

console.log вывод для this.state ... this is the state {overlay: true, users: Array(0), country: "Nigeria"}

import { onCountryClick } from "../Scene3D/AppSignals";
import OutsideClickHandler from "react-outside-click-handler";
import Users from "../Users";

import "./style.scss";

class Overlay extends Component {
  constructor(props) {
    super(props);
    this.state = { overlay: false, users: [], country: [] };
    this.openOverlay = this.openOverlay.bind(this);
    this.closeOverlay = this.closeOverlay.bind(this);
    this.fetchUsers = this.fetchUsers.bind(this);
  }

  openOverlay() {
    this.setState({ overlay: true });
  }

  closeOverlay() {
    this.setState({ overlay: false });
  }

  fetchUsers() {
    fetch(
      "**AWS***"
    )
      .then(response => response.json())
      .then(data => this.setState({ users: data.users }));
  }

  onCountryClick = (country, users) => {
    this.openOverlay();
    this.fetchUsers();
    this.setState({ country });
    console.log("users", this.state.users);
  };

  componentDidMount() {
    this.onCountrySignal = onCountryClick.add(this.onCountryClick);
  }

  componentWillUnmount() {
    this.onCountrySignal.detach();
  }

  render() {
    const country = this.state.country;
    const users = this.state.users;

    return (
      <OutsideClickHandler
        onOutsideClick={() => {
          this.closeOverlay();
        }}
      >
        <div className="users-container">
          {this.state.overlay && (
            <>
              <h1>{country}</h1>
              {users}
            </>
          )}
        </div>
      </OutsideClickHandler>
    );
  }
}

export default Overlay;```


  [1]: https://i.stack.imgur.com/NWOlx.png

Answer 1

Проблема здесь

 onCountryClick = (country, users) => {
  this.openOverlay();
  this.fetchUsers();
  this.setState({ country });
  console.log("users", this.state.users);
 };

Функция fetchUsers асинхронна и извлекается из исходного потока выполнения, а исходный стек выполнения продолжает выполнять console.log("users", this.state.users), который в настоящее время пуст, поскольку fetchUsers функция еще не выполнена чтобы доказать это, попробуйте войти в консоль внутри fetchUsers, и вы увидите, кто выполнил первый.