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

我想在嵌套函数中执行的操作是，从书籍字典中选择一本书（新来做出反应，他们在python中称这些词典），然后在图表数组中找到具有此书籍ID的对象，然后转到peeps数组并显示该人的名字。

我想要一个输出如下：

<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”

最佳答案

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
            {chart.map(obj => {
              !array[obj.bookLikedID]
                ? (array[obj.bookLikedID] = [obj.peepsID])
                : array[obj.bookLikedID].push(obj.peepsID)
            })}
          </h1>
        </header>
        <h2>Book People liked</h2>
        {Object.values(books).map(book => {
          return (
            <div>
              {array[book.id] ? (
                <div>
                  <span> Books:{book.name}</span>
                  <ul>
                    {array[book.id].map(id => {
                      return <li>{peeps[id].name}</li>
                    })}
                  </ul>
                </div>
              ) : (
                <div>
                  <span>Books:{book.name}</span>
                  <p>No one like the books</p>
                </div>
              )}
            </div>
          )
        })}
      </div>
    )
  }
}

简单的解决方案在这里...