比较同一对象中的 2 个数组键和值

Question

我目前正在开发一个使用 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;

Answer 1

我认为这可能是您想要做的：

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));

Answer 2

你必须避免像这样手动改变状态：

  this.state.sellers = o; //

https://reactjs.org/docs/state-and-lifecycle.html#using-state-correctly