Question

我目前正在从PHP切换到JavaScript，因此这是一次很棒的学习经历。现在，我陷入了困境。

我正在使用一个平台工具，该工具可以使人们注册项目的活动。看起来像这样：

红色部分已经完成，但绿色部分是问题所在。我的ActivityCard集合中包含以下文档：

{
  "_id" : "tTuiMhh2LFMqdywgc",
  "cardName" : "Diana Walls",
  "activitycardType" : 20,
  "startingDate" : "1987-07-01",
  "remainingHours" : 20,
  "activities" : [ 
    {
        "activityName" : "Cairo Daniel",
        "activityTotal" : "5",
        "activityEmployee" : "Repudiandae non voluptate quaerat in eaque qui enim cumque aspernatur incididunt eaque quas cumque",
        "activityDate" : "2011-10-14"
    }, 
    {
        "activityName" : "Chaney Jarvis",
        "activityTotal" : "20",
        "activityEmployee" : "Fugiat voluptates ad facilis soluta nemo",
        "activityDate" : "2010-05-12"
    }
  ],
  "isArchived" : 0
}

由于这些活动仅属于一个项目，因此我认为像上面的示例一样嵌套数据是可以的。但我想在活动卡片的主要数据下方打印数据（红色部分）。我获取数据的活动卡文件如下所示：

class ActivityCardDetails extends Component {
constructor(props) {
    super(props);
    document.title = 'Nieuwe strippenkaart';

    this.state = {
        message: ''
    };
}
renderActivityCardDetails () {
    return this.props.activitycards.map( activity => {

        return (
            <div className="medium-12 details" key={activity._id}>
                <input type="hidden" ref="currentActivityCard" value={activity._id} />

                <div className="medium-12 page-action">
                    <Link to='/strippenkaarten' className="link link-purple">
                        <img src="../images/icons/arrow-left.svg" alt="" />
                        Terug
                    </Link>

                    <Link to='/strippenkaarten' className="link link-purple">
                        Uren afboeken
                    </Link>
                </div>
                <div className="medium-12">
                    <div className="medium-3">
                        <div className="top">
                            <strong>Bedrijfsnaam</strong>
                            <p>Bedrijfsnaam</p>
                        </div>
                        <div className="bottom">
                            <strong>Locatie</strong>
                            <p>
                                Straat <br />
                                Postcode Plaats <br />
                                Land
                            </p>
                        </div>
                    </div>
                    <div className="medium-3">
                        <div className="top">
                            <strong>Product</strong>
                            <p>{activity.cardName}</p>
                        </div>
                        <div className="bottom">
                            <strong>Datum ingang</strong>
                            <p>{activity.startingDate}</p>
                        </div>
                    </div>
                    <div className="medium-3">
                        <div className="top">
                            <strong>Totale uren</strong>
                            <p>{activity.activitycardType} uur</p>
                        </div>
                        <div className="bottom">
                            <strong>Resterende uren</strong>
                            <p>{activity.remainingHours} uur</p>
                        </div>
                    </div>
                    <div className="medium-3">
                        <div className="top">
                            <strong>Actieve projecten</strong>
                            <p>gekoppelde projecten</p>
                        </div>
                    </div>

                    <div className="medium-12 progress">
                        <div className="progress-bar">
                            <label>{activity.remainingHours} uur resterend</label>
                            hier komt een nieuwe progress
                        </div>
                    </div>
                </div>
            </div>
        );
    });
}
renderCardDetails() {
  // HERE 
  // in this loop I need to get the ID for the current activity card, outside the mapping function
}
render() {
    return (
        <div className="medium-12 activitycard-details details">
            { this.state.message ? <p className="message">{this.state.message}</p> : undefined }

            <div className="list-wrapper">
                <div className="list-box clear">
                    {this.renderActivityCardDetails()}
                </div>
            </div>
        </div>
    );
  }
}
export default withTracker( (props) => {
  Meteor.subscribe('activitycards');

  const activitycardID = props.match.params.activitycardID;

  return { 
    activitycards: ActivityCards.find( {
        '_id': activitycardID
    } ).fetch()
  };
})(ActivityCardDetails);

我有另一个问题：在上面的代码中，我添加了一个带有一些注释的空方法，其中一个是： //在此循环中，我需要获取当前活动卡的ID，而不是映射功能，我是指一对多关系（将ID的孩子存储在父母的内部）。

我不知道存储当前活动卡片ID并通过ID获取其他详细信息的最佳方法。是否需要像上面使用多个映射函数那样创建多个渲染函数？还是有更好的方法？

MongoDB多个循环以分离数据并从闭环获取数据

0 个答案: