Javascript 我对过滤器和映射函数感到困惑。我正在给它们筑巢。请给我指一下正确的方向

我在嵌套函数中尝试做的是，从books dictionary中选择一本书（react的新功能，在python中称为这些字典），然后在charts数组中找到一个具有该书id的对象，然后转到peeps数组并显示该人的姓名

我希望有如下输出：

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

笑话101
喜欢的人：


穆尼布
奥萨马

---

import React，{Component}来自'React'；
导入“/App.css”；
从“/logo.svg”导入徽标；
常数图=[
{
id:1，
peepsID:'1'，
BooklikeId:'1'，
},
{
id:2，
peepsID:'2'，
BooklikeId:'1'，
},
{
id:3，
peepsID:'4'，
像书一样的ID:'5'，
},
{
id:4，
peepsID:'5'，
像书一样的ID:'2'，
},
{
id:5，
peepsID:'3'，
像书一样的ID:'5'，
},
{
id:6，
peepsID:'6'，
像书一样的ID:'4'，
},
];
常量窥视={
1: {
id:1，
姓名：'Fazal Deen'，
读者分类：“冠军”，
},
2: {
id:2，
姓名：'Irfan'，
读者分类：“新星”，
},
3: {
id:3，
名称：“Muneeb”，
readerCategory:'初学者'，
},
4: {
id:4，
名称：“奥萨马”，
读者分类：“冠军”，
},
5: {
id:5，
名称：“纳贾姆”，
读者分类：“冠军”，
},
6: {
id:6，
名称：“Aamir”，
读者分类：“初学者”，
},
};
常数书={
1: {
id:1，
名称：“Imran系列”，
},
2: {
id:2，
名字：'哈利波特'，
},
3: {
id:3，
姓名：'我是玛拉拉'，
},
4: {
id:4，
名称：“阿拉玛·伊克巴尔创作的Bang-e-Dara”，
},
5: {
id:5，
名字：“笑话101”，
},
};
类应用程序扩展组件{
render（）{
返回(
React训练营-培训培训师-编码实践
人们喜欢的书
{books.map(
value=>{value.name}喜欢者：

{chart.filter(
chartVal=>value.id==chartVal.bookLikedID，
{peeps.filter(
people=>people.id==chartVal.peepsID）}

)}
)}
);
}
}
导出默认应用程序；

我收到一个错误：“./src/App.js

---

第116行：“chartVal”未定义无未定义“

您的问题不是特定的反应。它是特定于Javascript的

以下是您想要的：

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

---

很抱歉，它不是从react端开始的，而是您需要解决的javascript。 不能使用map方法在对象上循环，所以首先需要将其转换为数组

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

---

您想要实现的目标可以通过以下方式实现：

const图表=[
{
id:1，
peepsID:“1”，
像书一样的文字：“1”，
},
{
id:2，
peepsID:“2”，
像书一样的文字：“1”，
},
{
id:3，
peepsID:“4”，
像书一样的铭文：“5”，
},
{
id:4，
peepsID:“5”，
像书一样的文字：“2”，
},
{
id:5，
peepsID:“3”，
像书一样的铭文：“5”，
},
{
id:6，
peepsID:“6”，
像书一样的文字：“4”，
},
];
常数peeps={
1: {
id:1，
姓名：“Fazal Deen”，
读者分类：“冠军”，
},
2: {
id:2，
姓名：“Irfan”，
读者分类：“新星”，
},
3: {
id:3，
名称：“Muneeb”，
读者分类：“初学者”，
},
4: {
id:4，
姓名：“奥萨马”，
读者分类：“冠军”，
},
5: {
id:5，
姓名：“纳贾姆”，
读者分类：“冠军”，
},
6: {
id:6，
名称：“阿米尔”，
读者分类：“初学者”，
},
};
常数书={
1: {
id:1，
名称：“伊姆兰系列”，
},
2: {
id:2，
名字：“哈利波特”，
},
3: {
id:3，
姓名：“我是玛拉拉”，
},
4: {
id:4，
名称：“阿拉玛·伊克巴尔创作的Bang-e-Dara”，
},
5: {
id:5，
名称：“笑话101”，
},
};
const e=React.createElement；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={chart，peeps，books}；
}
getPeeps（bookId）{
回报表
.filter（c=>bookId==c.bookLikedID）
.map（c=>Object.values（peeps.find）（p=>p.id==c.peepsID））
.map（p=>
{p.name}
）；
}
render（）{
返回(
React训练营-培训培训师-编码实践
人们喜欢的书
{Object.values（books.map）（book=>(
{book.name}
喜欢的人：

{this.getPeeps（book.id）}
))}
);
}
}
const domContainer=document.querySelector（“app”）；
render（e（App），domContainer）

类应用程序扩展组件{
渲染（）{
返回(
React训练营-培训培训师-编码实践
{chart.map（obj=>{
！数组[obj.bookliedd]
？（数组[obj.bookLikedID]=[obj.peepsID]）
：数组[obj.bookLikedID].push（obj.peepsID）
})}
人们喜欢的书
{Object.values（books.map）（book=>{
返回(
{数组[book.id](
书籍：{book.name}

{array[book.id].map（id=>{
return
{peeps[id].name}
})}

) : (
书籍：{book.name}
没有人喜欢这些书

)}
)
})}
)
}
}

简单的解决方案是…
从您的数据来看，《笑话101》这本书似乎只有“Osama”
book
和
peep
不是数组。它说：“TypeError:books.map不是函数”@FaizanMustafa，这是因为
books
不是数组。你可以做
Object.values（books.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>
        )
    }
}

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

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