在 React JSX 中循环遍历简单的对象属性

Question

我正在尝试遍历 JSX 中一个非常简单的对象的属性。我已经关注了this 其他帖子并以相同的方式编写了我的代码，尽管我收到了错误“找不到变量：a”。如果我没记错的话，使用 for in 循环不被认为是 react 的最佳实践。

有人可以就我哪里出错提供一些指导吗？

我已经发了stackblitz（点击subs然后查看任何sub），否则代码如下：

/components/sub.js:

import React from "react";

export default class SingleSub extends React.Component {
  render() {
      return (
        <div>
            {this.props.sub.entries(a).map(([key, value]) => {
                key, value
            })}
        </div>
      )
  }
}

/pages/sub.js - 注释行<SingleSub sub={this.state.sub} />

import React from 'react'
import SingleSub from '../components/sub.js'

export class SubPage extends React.Component {
    state = {
        loading: true,
        sub: null
    };

    async componentDidMount() {
        const url = 'https://em-app-basic.herokuapp.com/emails-api';
        const response = await fetch(url);
        const data = await response.json();
        this.setState({
            loading: false,
            sub: data.subs.find(sub => sub._id === this.props.match.params._id)
        })
    }

    render() {
        if (this.state.loading) {
            return <div>loading sub...</div>
        }
    
        if (!this.state.sub) {
            return <div>no sub to load.</div>
        }

        return (
            <div className="sub-details-individual">
                <h1 class="std-intro">Viewing a Single Subscriber</h1>
                <div className="sub-specs">
                    <div className="sub-specs-inner">
                        <SingleSub sub={this.state.sub} />
                        <div class="sub-spec">
                            <div className="sub-spec-detail">Name:</div>
                            <div className="sub-spec-value"></div>
                        </div>
                        <div class="sub-spec">
                            <div className="sub-spec-detail">ID:</div>
                            <div className="sub-spec-value">{this.props.match.params._id}</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

一个示例对象：

感谢您的帮助。

更新：

现在输出键和值但现在 html 输出为字符串而不是真正的 html 的最新代码：

import React from "react";

export default class SingleSub extends React.Component {
  render() {
      return (
        <div>
            {Object.entries(this.props.sub).map(([key, value]) => 
                `<div class="sub-spec">
                    <div class="sub-spec-detail">
                        ${key}
                    </div>
                    <div class="sub-spec-value">
                        ${value}
                    </div>
                </div> `
            )}
        </div>
      )
  }
}

Answer 1

在sub.js，尝试更改，

来自，

{this.props.sub.entries(a).map(([key, value]) => {
   key, value
})}

到，

{Object.entries(this.props.sub).map(([key, value]) => {
   key, value
})}