javascript - 比较同一对象中的 2 个数组键和值
问题描述
我目前正在使用 Firebase(实时数据库)和 ReactJS 开发一个应用程序。我有以下内容:
我想在 SellersList 中检查是否为真值。对于每个为真的值,我想检查卖家数组中是否包含与“名称:XXX”键值对中第一个数组中的键相同的值的项目。
示例:如果我有“Nike”和“Puma”作为true
,我想在卖家数组中检查以“Nike”和“Puma”作为名称值的项目,并返回整个父对象(所以我可以访问头像、链接等)。
编辑:这是我的完整组件代码:
import React, { Component } from 'react';
import Popup from '../Navbar/Popup';
import Upvote from './Upvote';
import actions from '../../actions';
import connectToStores from 'alt-utils/lib/connectToStores';
import ProductStore from '../../stores/ProductStore';
@connectToStores
class ProductPopup extends Component {
constructor(props) {
super(props);
this.state = {
sellers: [],
};
this.commentInput = React.createRef();
this.handleCommentButton = this.handleCommentButton.bind(this);
}
static getStores() {
return [ProductStore];
}
static getPropsFromStores() {
return ProductStore.getState();
}
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.status && this.props.status != nextProps.status) {
actions.getComments(this.props.pid);
}
return true;
}
renderHeader() {
return (
<header>
<section className="product-header-content">
<div className="product-header-thumb">
<img src={this.props.thumbnail} />
</div>
<div className="product-header-info">
<h1>{this.props.name}</h1>
<p>{this.props.tagline}</p>
</div>
</section>
</header>
);
}
renderContent() {
return (
<section className="product-container">
<div className="product-main">
<section className="product-infos_wrapper">
<section>
<img src={this.props.media} className="product-image" />
</section>
<section className="product-infos">
<p>{this.props.description}</p>
</section>
</section>
</div>
<div className="product-aside">
<div className="aside-btn">
<Upvote {...this.props} />
</div>
<div className="product-links-list">
<h3>Ou trouver la paire</h3>
<ul className="product-sellers">
{Object.keys(this.state.sellers)}
</ul>
</div>
</div>
</section>
);
}
handleComment = (e) => {
if (e.keyCode === 13 && e.target.value.length > 0) {
var comment = {
content: e.target.value,
name: this.props.user.name,
avatar: this.props.user.avatar,
};
actions.addComment(this.props.pid, comment);
e.target.value = null;
}
};
handleCommentButton() {
if (this.commentInput.current.value.length > 0) {
var comment = {
content: this.commentInput.current.value,
name: this.props.user.name,
avatar: this.props.user.avatar,
};
}
actions.addComment(this.props.pid, comment);
this.commentInput.current.value = null;
}
renderBodyDiscussion() {
return (
<section className="discussion">
<h2>Commentaires</h2>
{this.props.user ? (
<section className="post-comment">
<img src={this.props.user.avatar} className="medium-avatar" />
<input
placeholder="Que pensez-vous de ce produit ?"
onKeyUp={this.handleComment}
ref={this.commentInput}
/>
<button type="submit" className="btn btn-primary" onClick={this.handleCommentButton}>
Envoyer
</button>
</section>
) : null}
{this.renderComments()}
</section>
);
}
renderBody() {
return (
<section className="product-popup-body">
<main>{this.renderBodyDiscussion()}</main>
</section>
);
}
renderComments() {
return (
<ul className="comment-list">
{this.props.comments.map(function (comment, index) {
return (
<li key={index} className="comment-item">
<div className="comment-item_user">
<img src={comment.avatar} className="medium-avatar" />
<strong>{comment.name}</strong>
</div>
<section className="comment-item_content">
<p>{comment.content}</p>
</section>
</li>
);
})}
</ul>
);
}
render() {
const allSellers = Object.keys(this.props.sellersList).reduce((o, key) => {
this.props.sellersList[key] !== false && (o[key] = this.props.sellersList[key]);
this.state.sellers = o;
return o;
}, {});
console.log(this.props);
return (
<Popup {...this.props} style="product-popup">
{this.renderHeader()}
{this.renderContent()}
{this.renderBody()}
</Popup>
);
}
}
export default ProductPopup;
解决方案
我认为这可能是你想要做的:
const sellers = [
{ avatar: "1", name: "Nike" },
{ avatar: "2", name: "Puma" },
{ avatar: "3", name: "Something" },
];
const sellersList = {
Nike: true,
Puma: true,
Something: false,
};
const includedSellers = Object.keys(sellersList).filter(
(brand) => sellersList[brand]
);
const results = sellers.reduce(
(results, seller) =>
includedSellers.includes(seller.name) ? [seller, ...results] : results,
[]
);
console.log(results);
//BETTER SOLUTION FROM @Drew Reese
const results2 = sellers.filter(({ name }) => includedSellers.includes(name));
console.log(results2);
这将为您提供数组中的对象sellers
数组,其中seller.name
是sellersList
具有真实值的属性。
编辑:正如@Drew Reese 指出的那样,您只需filter
:
const results = sellers.filter(seller => includedSellers.includes(seller.name));
推荐阅读
- r - 如何pivot_longer在多列上的表
- c++ - C ++中同一行中的函数参数初始化
- python - 具有遗传算法的神经网络并没有变得更好
- python - 为什么 Python 有时会漏掉异常钩子的 traceback 参数?
- r - For循环从R中的数据框列表中创建相同的表
- django - 如何获取父对象中的下一个对象?
- python - 尝试使用 Helium/Selenium 登录 Instagram 时出现查找错误
- many-to-many - 我可以在我的数据仓库/表格模型中的不同字段上创建多对多关系吗?
- laravel - Laravel + Vuejs + Laravel-Webscoket + Apache
- snakemake - 在一个作业步骤中处理输入数组