如何在反应类组件中映射字典答案

【问题标题】：How to map dictionary in react class component如何在反应类组件中映射字典
【发布时间】：2021-08-04 11:22:14
【问题描述】：

你好，社区！希望你们一切都好。

我试图在我的类组件中映射一个字典，但它给了我一个钩子错误。我想创建几张具有不同信息的卡片，以便我这样接近，但现在它向我显示 Hooks 错误，我尝试了很多东西，发现这段代码有错误，但无法弄清楚请帮助我。

我的代码在下面

export class AskModal extends Component {
  constructor(props) {
    super(props);

    this.state = {
      modalState: true,
      services: {
        "Employement": [
          "/employement",
          "/images/humhai-static-data/employment.jpg",
          "This para is for Employement",
          "text-dark"
        ],
        "Business opportunity": [
          "/self-employement",
          "/images/humhai-static-data/buisness-opportunity.jpg",
          "This para is for Self Employement",
          "text-dark"
        ],
        "Covid Helpdesk": [
          "../covid-helpline",
          "/images/humhai-static-data/covid-helpdesk.jpg",
          "This para is for Covid help desk",
          "text-danger"
        ],
        "Volunteer": [
          "../covid-helpline/volunteer",
          "/images/humhai-static-data/volunteer.jpg",
          "This para is for Volunteer",
          "text-dark"
        ],
      },
    };

    this.toggle = this.toggle.bind(this);

  }
  toggle = () => {
    this.setState({
      modalState: !this.state.modalState
    });
  }

  render() {
    return (
      <>
        {Object.keys(this.state.services).map(name => (
          <MDBCol md="3" size="6" className="mx-auto my-2">
            <MDBCard className="border rounded h-100 z-depth-5" color={this.state.services[name][3]}>
              <Link to={this.state.services[name][0]} onClick={this.toggle} className={this.state.services[name][3]}>
                <MDBCardImage className="img-fluid" src={this.state.services[name][1]} />
                <MDBCardBody>
                  <MDBCardTitle><i className="fa fa-chevron-right"></i> {name}</MDBCardTitle>
                  <div className="d-none d-lg-block">
                    <hr />
                    <MDBCardText>
                      <p>{this.state.services[name][2]}</p>
                    </MDBCardText>
                  </div>
                </MDBCardBody>
              </Link>
            </MDBCard>
          </MDBCol>
        ))
        }
      </>
    );
  }
}

【问题讨论】：

你说的是不可能的。代码中没有钩子。另外，类组件中不能使用钩子，需要先将其转换为函数组件
你能告诉我怎么做吗？我刚开始使用 react JS 和一个菜鸟 @Tyblitz
好像完全没有问题。你在使用任何图书馆吗？我在codesandbox上试过了，效果很好：codesandbox.io/s/icy-snowflake-0gsqx?file=/src/App.js

标签： javascript reactjs react-hooks jsx

【解决方案1】：

我认为错误是因为您在 this.state.services 上制作地图，理想情况下它甚至不应该与 hooks 相关，因为您没有在此组件中使用它们。

如果您检查 state 对象，this.state.services 将返回 object 而不是数组。因此，如果您可以重新访问您的代码并进行检查。此外，您创建 services 对象的方式可能不是最好的方式，只需在下方添加一个 sn-p 以帮助您使其更具可扩展性。

const services = [
  { name: "Employment", route: "/employment", image: "path/to/image.jpg", text: "Text", mode: "dark mode" }, // and so on
]

【讨论】：

谢谢，@jaybhatt 现在我知道我做错了什么