Question

我正在使用three.js和React构建一个数据可视化项目。

当前，当您与three.js领域进行互动时，会触发点击事件以从模拟数据库中获取用户和国家/地区数据。

此数据将传递到我的叠加层组件，因此单击时会弹出。

这一切都是正确的，但是当涉及到通过数据进行映射时，我似乎无法访问所需的内容。

下面的代码，非常感谢您的帮助，我认为自己在做傻事！

import OverlayContent from "./OverlayContent";
import { onCountryClick } from "../Scene3D/AppSignals";
import Portal from "./Portal";
import "./style.scss";

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

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

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

  onCountryClick = (country, users) => {
    this.openOverlay();
    this.setState(
      {
        users: [...this.state.users, users],
        country
      },
      () => {}
    );
  };

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

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

  render() {
    const users = this.state.users;
    const country = this.state.country;
    console.log(this.state);
    return (
      <div className="btn-container">
        {this.state.overlay && (
          <Portal>
            <div>
              {users.map(user => (
                <>
                  <h1>{user.nbUsers}</h1>
                  <h1>{user.name}</h1>
                </>
              ))}

              <button className="btn" onClick={this.closeOverlay}>
                Close
              </button>
            </div>
          </Portal>
        )}
      </div>
    );
  }
}

export default Overlay;

因此，当点击叠加层时，我只得到空标签，控制台日志显示中...

overlay: true
users: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
country: "USA"
__proto__: Object```

I need to access user.name, country and a few other bits of data.

React数组映射在单击时访问信息的问题

0 个答案: