地图和查找的 ReactJS 问题答案

【问题标题】：ReactJS issue with map and find地图和查找的 ReactJS 问题
【发布时间】：2019-01-04 11:52:49
【问题描述】：

所以我有一个这种类型的数组，

   (5) [{…}, {…}, {…}, {…}, {…}]
0: {naam: "Tafel 1 ", id: 1, aantalPersonen: 3, aantalMinuten: 3, bezet: 1, …}
1: {naam: "Tafel 2 ", id: 2, aantalPersonen: 1, aantalMinuten: 3, bezet: 1, …}
2: {naam: "Tafel 3 ", id: 3, aantalPersonen: 2, aantalMinuten: 6, bezet: 1, …}
3: {naam: "Tafel 4", id: 4, aantalPersonen: 0, bezet: 0, tafelLayout: {…}}
4: {naam: "Tafel 5", id: 5, bezet: 0, aantalPersonen: 0, tafelLayout: {…}}
length: 5
__proto__: Array(0)

我可以将它映射到一个组件，然后将它们全部呈现在 div 中，并且效果很好。现在我要做的是只渲染一个特定的。

this.state.tafels.find(tafel =>(tafel.id = 1))

例如找到我想使用的那个

必须使用 props 映射到组件

  <PlattegrondResto

                        tafelNr={tafel.id}
                        tafelNaam = {tafel.naam}
                        tafelLayout={tafel.tafelLayout}
                        tafelaantalPersonen={tafel.aantalPersonen}
                        tafelMinuten = {tafel.aantalMinuten}
                        tafelBezet = {tafel.bezet}
                        tafelSelect={(tafelNr) => this.tafelSelect(tafelNr)}
                        tafelTijdInterval = {this.state.tijdInterval}

                    />

有什么方法可以有效地做到这一点吗？到目前为止，我尝试了所有我能想到的方法

映射它们我使用的所有内容

 {this.state.tafels.map((tafel) =>
                    <PlattegrondResto

                        tafelNr={tafel.id}
                        tafelNaam = {tafel.naam}
                        tafelLayout={tafel.tafelLayout}
                        tafelaantalPersonen={tafel.aantalPersonen}
                        tafelMinuten = {tafel.aantalMinuten}
                        tafelBezet = {tafel.bezet}
                        tafelSelect={(tafelNr) => this.tafelSelect(tafelNr)}
                        tafelTijdInterval = {this.state.tijdInterval}

                    />


                )}

所以我想知道有没有办法先使用 find 然后将其映射到下面显示的组件

提前致谢

【问题讨论】：

标签： reactjs dictionary find

【解决方案1】：

可以先过滤再映射，考虑如下代码：

this.state.tafels.filter(tafel => tafel.id === 1).map(tafel => 
                  <PlattegrondResto
                    tafelNr={tafel.id}
                    tafelNaam = {tafel.naam}
                    tafelLayout={tafel.tafelLayout}
                    tafelaantalPersonen={tafel.aantalPersonen}
                    tafelMinuten = {tafel.aantalMinuten}
                    tafelBezet = {tafel.bezet}
                    tafelSelect={(tafelNr) => this.tafelSelect(tafelNr)}
                    tafelTijdInterval = {this.state.tijdInterval}
                />)

【讨论】：

你是救命稻草，这简直太完美了，这让我可以时不时地使用不同的楼层，然后在该州通过可选择的数字过滤它们。节省了我很多时间。
很高兴能帮上忙 :)