あまり難しいことはしてないのでまるっと公開してしまいますが。
おすすめサービスの候補が仮に20個あったとして、
1. arrayにその20件の情報を格納します。
2. 0-19までの乱数を発生させ、該当するインデックスをdispArrayに格納し、arrayから削除します。
3. 残ったarrayに対して再度乱数を発生させます。
あとはReactのJSXを組み立てるだけですね。
export class RecommendServices extends React.Component {
render() {
if (store.getState().recommend === undefined) {
let array = [];
let dispArray = [];
for (let i = 0; i < recommendConfig.length; i++) {
array.push(i);
}
for (let j = 0; j < 3; j++) {
let num = Math.floor(Math.random() * array.length);
if(array[num] !== undefined){
dispArray.push(array[num]);
}
array.splice(num, 1);
}
console.log("dispArray", dispArray);
store.dispatch(setRecommend(dispArray));
console.log(store.getState());
}
let dispElm = [];
for (let i = 0; i < store.getState().recommend.length; i++) {
dispElm.push(
<div className="card">
<div className="card-title">
<a href={recommendConfig[store.getState().recommend[i]].href}>
<img src={recommendConfig[store.getState().recommend[i]].img} width={200}/>
<br/>
<div>
{recommendConfig[store.getState().recommend[i]].title}
<i className="fas fa-external-link-alt 2x" style={{ fontSize: 14 }}/>
</div>
</a>
</div>
<div style={{ fontSize: 12 }}>
{recommendConfig[store.getState().recommend[i]].comment}
</div>
</div>
);
}
console.log(dispElm)
return (
<div>{dispElm}</div>
);
}
}
recommendConfig
export const recommendConfig = [
{
title:'Crieit',
href:'https://crieit.net/boards/baseball-score-management',
img:'https://storage.googleapis.com/deviita/upload_images/a920719ad1329bd0abcef3505eda1be85c198e94430c7.png',
comment:'本システムの開発の進捗を掲載させていただいています。'
},
{....}
]