2021-07-19 ReactJs初学，return 循环中出现的问题。

一：背景

在React中 return 的是一个map循环时，会 render 多次导致 Modal 对话框渲染多次，导致背景直接变黑的问题。如下图，

二：所导致的后果

如果这时候我们在这个 map 循环中使用了 Modal 对话框的话，会直接导致 Modal 对话框渲染多层，从而导致背景直接变黑的问题。

三：解决方案

因为 React 我也算是个初学者，所以并不能给到很好的原理解释，只能通过给出代码解释。

此时在你的点击事件上，要给控制 Modal 是否显示的boolean类型上给个唯一的属性，也就是 key。用 key 来表示这个你点击的对话框，这样，就确定了唯一性，不会出现渲染多层的情况。

话不多说，看代码
你的点击事件，控制 Modal 是否展示的。
onClick={() => unitConversion(item, item.skuId)}

unitConversion = (val, id) => { const { showUnitInfo } = this.state; this.setState({ showUnitInfo: { [id]: !showUnitInfo, }, }) }

展示 Modal 对话框的地方，也就是 map 循环中。
{showUnitInfo[item.skuId] ? <MOodal></Modal> : '-'}

我们可以看到，我们全程都是通过 showUnitInfo 这个boolean 类型给其加上一个唯一性的 key 属性来确保当前打开的对话框是唯一的，这样就避免了会渲染多层的问题。

四：结束语

对于 ReactJs 来说，我也是个初学者，所以，有什么问题请多指教！
最后，有用的话，麻烦点个赞再走吧。蟹蟹。