Я запутался с функциями фильтра и карты. Я их вкладываю. Пожалуйста, укажите мне в правильном направлении

Question

То, что я пытаюсь сделать во вложенных функциях, - это выбрать книгу из словаря книг (новичок реагирует, они называют эти словари в python), а затем найти объект в массиве диаграмм, у которого есть этот идентификатор книги, а затем перейти к выглядывает массив и отображает имя этого человека.

Я хочу получить вывод, подобный следующему:

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

Answer 1

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

Простое решение здесь ...

Answer 2

Извините, но я не реагирую со стороны реакции на свой javascript, где вам нужно потренироваться. Вы не можете зациклить объект, используя метод map, поэтому сначала вам нужно преобразовать его в массив.

Object.values(books).map(item => { console.log(*item.your_value_name*)})

Answer 3

То, чего вы хотите достичь, можно сделать следующим образом:

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",
  },
};

const e = React.createElement;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { chart, peeps, books };
  }

  getPeeps(bookId) {
    return chart
      .filter(c => bookId == c.bookLikedID)
      .map(c => Object.values(peeps).find(p => p.id == c.peepsID))
      .map(p => <li key={p.id}>{p.name}</li>);
  }

  render() {
    return (
      <div>
        <header className="App-header">
          <h1 className="App-title">
            React Bootcamp - Train the Trainer - Coding Practice
          </h1>
        </header>
        <h2>Book People liked</h2>
        {Object.values(books).map(book => (
          <div key={book.id}>
            <h2>{book.name}</h2>
            <p>Liked by:</p>
            <ul>{this.getPeeps(book.id)}</ul>
          </div>
        ))}
      </div>
    );
  }
}

const domContainer = document.querySelector("#app");
ReactDOM.render(e(App), domContainer);

<body>

<div id="app"></div>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

</body>

Хотя я бы конвертировал книги и пипы в массивы, переименовывал пипы в людей, чарты в диаграммы, а в диаграммах конвертировал строковые идентификаторы в числа, например так:

const charts = chart.map(c => Object.assign(c, 
 {peepsID: parseInt(peepsID), bookLikedID: parseInt(bookLikedID)}))

Answer 4

Ваша проблема не относится к React. Это специфично для Javascript.

Вот что вы хотите:

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

Так вы бы связали filter и 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>
        )
    }
}