Javascript 使用Reactjs在数组中映射数组

我试图在一些数据上获得一些贴图，并将其渲染为卡片样式的组件

我的用户数组中的数据结构如下（所有假数据）

这是代码

import React from "react";
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: [users], country });
  };

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

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

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

    console.log(users);
    return (
      <div className="btn-container">
        {this.state.overlay && (
          <Portal>
            <div>
              <h1>{country}</h1>
              {users &&
                users.map(user => (
                  <div className="user_container">
                    <h1 key={user.id} className="user_name">
                      {user.favouriteQuote}
                    </h1>
                  </div>
                ))}
              <button className="btn" onClick={this.closeOverlay}>
                Close
              </button>
            </div>
          </Portal>
        )}
      </div>
    );
  }
}

export default Overlay;

从“React”导入React；
从“/OverlyContent”导入OverlyContent；
从“./Scene3D/AppSignals”导入{onCountryClick}”；
从“/Portal”导入门户；
导入“/style.scss”；
类覆盖扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={overlay:false，用户：[]，国家：[]；
this.openOverlay=this.openOverlay.bind（this）；
this.closeOverlay=this.closeOverlay.bind（this）；
}
openOverlay（）{
this.setState（{overlay:true}）；
}
closeOverlay（）{
this.setState（{overlay:false}）；
}
onCountryClick=（国家/地区，用户）=>{
这个.openOverlay（）；
this.setState（{users:[users]，country}）；
};
componentDidMount（）{
this.onCountrySignal=onCountryClick.add（this.onCountryClick）；
}
组件将卸载（）{
this.onCountrySignal.detach（）；
}
render（）{
const country=this.state.country；
const users=this.state.users；
console.log（用户）；
返回(
{this.state.overlay&&(
{国家}
{用户&&
users.map（user=>(
{user.favoriteQuote}
))}
接近
)}
);
}
}
导出默认覆盖；

当映射到此用户阵列时，它似乎不允许我访问所需的实际用户数据。是因为我在一个数组中有一个数组吗

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

---

用户是数组吗？如果是这样，请删除此处的括号或映射第一个元素

users[0].map（）

似乎您想映射

用户。users

您缺少map的返回值还需要注意的是，从您发布的数据中，似乎没有“id”字段用作键，而只有“name”字段。@DennisVash我也这么认为，但当我有“`{users.users.map（user=>（```I get无法读取未定义的属性'map'。这是因为它是一个对象而不是数组吗？我想如果您删除这里的括号

this.setState（{users:[users]，country}）；

并更改为

this.setState（{users:users，country}）；

它将是一个单独的数组，而不是数组中的数组，并且可以工作。您需要嵌套它吗？