Javascript 将随机颜色应用于UI元素，并在商店中跟踪它

我有一个React Redux web应用程序
在项目列表中，我想为每个项目生成随机颜色， 在第一次时间
然后保持颜色相同。 我正在从服务器获取联系人，然后将其存储在redux存储中。用户可以在稍后的滚动页面上获取更多联系人

我的问题是决定在哪里执行随机操作：

• 如果在component类中执行此操作，将导致渲染多次 次，并将导致错误
• 我可以在获取列表数据的操作中执行此操作，但它将
  制作了解ui中颜色（数组）的操作

反应列表样本

function render（）{
const{contacts}=this.props；
const contacts=mailContacts.map(({
id、名称、代码段、颜色索引
}) => {
常数指数；
if（colorIndex==未定义）{
索引=myRandom（ColorScont）；
//这是一个糟糕的解决方案，它会重新启动ui
//次数过多会导致错误
this.props.saveRandomColor（id，colorIndex）；
}否则{
指数=颜色指数；
}
contacts.map（contact=>{
返回(
);
})
});
}

您可以将唯一联系人id的绑定存储到全局状态中随机生成的颜色，并在初始呈现

ContactCard

组件时将其附加到颜色映射中

之后，相应的

ContactCard

组件将根据其id和全局颜色映射进行渲染：

//依赖项
const{useffect}=React，
{render}=ReactDOM，
{createStore}=Redux，
{connect，Provider}=ReactRedux
//随机色函数
常量随机颜色=（）=>{
常量rndHex=（）=>（0 | Math.random（）*255）.toString（16）.padStart（2，'0'））
返回`${[…数组（3）].map（rndHex.join（“”）}`
}
//默认状态，联系人列表颜色映射为空，应用程序和商店为空
const defaultState={contacts颜色：[]}，
通知者=（状态=默认状态，操作）=>{
开关（动作类型）{
案例“附加颜色绑定”：{
const{contactId}=action，
{contactsColors}=状态
contactsColors.push（{id:contactId，color:randomColor（）}）
返回{…状态，联系人颜色}
}
默认值：返回状态
}
},
store=createStore（Appeducer）
//联系人卡用户界面组件
const ContactCard=（{name，color，onInitialRender}）=>{
useEffect（onInitialRender，[]）
返回(
{name}
)
}
//联系卡片容器，从商店中检索颜色映射，回退为白色
常量mapStateToProps=（{contactsColors}，{id}）=>({
颜色：（contactsColors.find（item=>item.id==id）| |{color:'white'}）。颜色
}),
mapDispatchToProps=（调度，{id}）=>({
onInitialRender:（）=>分派（{type:'APPEND\u COLOR\u BINDING'，contactId:id}）
}),
ContactCardContainer=连接（mapStateToProps、mapDispatchToProps）（ContactCard）
//联系人卡片包装器，在其参数中包含整个联系人列表
const ContactList=（{contacts}）=>(
{contacts.map（{id，name}，key）=>）}
)
//使用任意源数组绘制联系人列表
渲染(
,
document.getElementById（'root'））
)

---

如果您知道要渲染多少项，请在进行任何渲染之前预先确定颜色并将值存储在redux存储中，即首先设置初始状态。因此，您建议在操作中执行此操作？这取决于应用程序的工作方式。如果你的应用程序以联系人开始，那么我会在呈现任何内容之前预先确定他们的颜色。因此，要做到这一点，我需要适当地设置商店。如果你点击某个东西来添加新联系人，是的，我会发送一个动作，然后在redux reducer中生成颜色（然后更新此新项目的状态）。我的应用程序从服务器获取数据。我正在考虑将其移动到获取数据的动作，我唯一关心的是设计。它迫使操作了解ui颜色或有多少颜色。我的情况有点不同。我在开始时从服务器获取联系人，当用户滚动时，我获取更多联系人。