javascript - 我对过滤器和地图功能感到困惑。我正在嵌套它们。请指出我正确的方向

Question

我在嵌套函数中尝试做的是，从书籍字典中选择一本书（新的反应，他们在 python 中调用这些字典），然后在图表数组中找到一个具有这本书 ID 的对象，然后我去窥视数组和显示那个人的名字。

我想要一个如下输出：

<div>
  <h2>Jokes 101</h2>
    <p>Liked By:</p>
    <ul>
      <li>Muneeb</li>
      <li>Osama</li>
    </ul>
</div>

---

import React, { Component } from 'react';
import './App.css';
import logo from './logo.svg';

const chart = [
  {
    id: 1,
    peepsID: '1',
    bookLikedID: '1',
  },
  {
    id: 2,
    peepsID: '2',
    bookLikedID: '1',
  },
  {
    id: 3,
    peepsID: '4',
    bookLikedID: '5',
  },
  {
    id: 4,
    peepsID: '5',
    bookLikedID: '2',
  },
  {
    id: 5,
    peepsID: '3',
    bookLikedID: '5',
  },
  {
    id: 6,
    peepsID: '6',
    bookLikedID: '4',
  },
];

const peeps = {
  1: {
    id: 1,
    name: 'Fazal Deen',
    readerCategory: 'champ',
  },
  2: {
    id: 2,
    name: 'Irfan',
    readerCategory: 'rising-star',
  },
  3: {
    id: 3,
    name: 'Muneeb',
    readerCategory: 'beginner',
  },
  4: {
    id: 4,
    name: 'Osama',
    readerCategory: 'champ',
  },
  5: {
    id: 5,
    name: 'Najam',
    readerCategory: 'champ',
  },
  6: {
    id: 6,
    name: 'Aamir',
    readerCategory: 'beginner',
  },
};

const books = {
  1: {
    id: 1,
    name: 'Imran Series',
  },
  2: {
    id: 2,
    name: 'Harry Potter',
  },
  3: {
    id: 3,
    name: 'I Am Malala',
  },
  4: {
    id: 4,
    name: 'Bang-e-Dara by Allama Iqbal',
  },
  5: {
    id: 5,
    name: 'Jokes 101',
  },
};

class App extends Component {
  render() {
    return (
      <div>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">React Bootcamp - Train the Trainer - Coding Practice</h1>
        </header>
        <h2>Book People liked</h2>
        { books.map(
          value => <div><h2>{value.name}</h2> <p>Liked by:</p> 
          <ul>{chart.filter(
            chartVal => value.id == chartVal.bookLikedID,
            <li>{peeps.filter(
              people => people.id == chartVal.peepsID)}
            </li>
          )}</ul>
          </div>
        )}
      </div>
    );
  }
}

export default App;

我收到一个错误：“./src/App.js 第 116 行：'chartVal' 未定义 no-undef”

标签： javascriptreactjsecmascript-6

Answer 1

您的问题并非特定于 React。它特定于 Javascript。

这是你想要的：

                    <ul>
                        {chart
                            .filter(chartVal => value.id == chartVal.bookLikedID)
                            .map(chartVal => (
                                <li>
                                    {peeps.filter(people => people.id == chartVal.peepsID)}
                                </li>
                            ))}
                    </ul>

这就是您将 afilter和 a链接map在一起的方式。

这是整个组件：

class App extends Component {
    render() {
        return (
            <div>
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">
                        React Bootcamp - Train the Trainer - Coding Practice
                    </h1>
                </header>
                <h2>Book People liked</h2>
                {Object.values(books).map(value => (
                    <div>
                        <h2>{value.name}</h2> <p>Liked by:</p>
                        <ul>
                            {chart
                                .filter(chartVal => value.id == chartVal.bookLikedID)
                                .map(chartVal => (
                                    <li>
                                        {peeps.filter(people => people.id == chartVal.peepsID)}
                                    </li>
                                ))}
                        </ul>
                    </div>
                ))}
            </div>
        )
    }
}