Question

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

有人可以提供一些有关我要去哪里的指导吗？

我已经创建了stackblitz（单击子菜单，然后查看任何子菜单），否则代码如下：

/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
})}

在React JSX中循环访问简单对象属性

1 个答案: