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”

Answer 1

您的问题并非特定于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>
        )
    }
}

Answer 2

很抱歉，您的JavaScript不能在React方面做出反应，您需要解决。您无法使用map方法遍历对象，因此首先需要将其转换为数组。

let cellTypes: Array<CellType> = [new Hotel(100), new Jail(200)];

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>

尽管我会将书和偷看的东西转换为数组，将偷看的名字重命名为人物，将图表重命名为图表，并在图表中将字符串ID转换为数字，例如：

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

Answer 4

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

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

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

4 个答案: