Question

我有一个3D地球，当您单击某个国家/地区时，它会返回用户叠加层。

我以前使所有工作仅在本地文件中随机模拟的用户数据文件中进行。但是，现在我已经收到了实际的数据库（一个AWS数据库），而且似乎无法获取要返回的数据。它应该接受来自国家/地区单击的信号，然后从中返回用户列表，并在弹出窗口中显示他们。

我现在已经取出了实际的数据库（机密信息），但这在邮递员和我创建的简化提取请求中可以正常使用。在此应用程序的更广泛上下文中，它似乎不起作用。

在这个阶段，它不会中断，只是在控制台中返回一个空数组。

此状态的

console.log输出... 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中控制台日志，您将看到谁先执行。

反应获取请求返回一个空数组

1 个答案: