I asked a question here about how to get 20 random items from this JSON and I used one of the answers below:
const a = Myjson;
useEffect(() => {
for (let i = a.length; i-- > 0; ) {
const j = Math.floor(Math.random() * i); // 0 ≤ j ≤ i
[a[i], a[j]] = [a[j], a[i]];
}
}, []);
{a
.slice(0, 20)
.map((item) => (
<Link
href={item.ud}
key={item.id}
>
{item.test}
</Link>
))}
There is a problem, when I refresh I see the ordered 20 items of this JSON and then suddenly it changes to a random 20 items; how can I fix the code so that when I refresh I only see the random 20 items and don't see those ordered items?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can use
useStateto provide a consistent (random) ordering that is generated on the first render, instead of usinguseEffectto update the ordering after the first render:const [a] = useState(() => { // Same code as in your useEffect, but with `a` renamed for clarity let b = [...Myjson]; // take a copy of the array for (let i = b.length; i-- > 0; ) { const j = Math.floor(Math.random() * i); // 0 ≤ j ≤ i [b[i], b[j]] = [b[j], b[i]]; } return b; // Return value is used as the state value }); // ... rendering code as beforeuseStatewill run the initialization code the first time the component renders. AlthoughuseStatealso returns a setter, you don't need to use it to retain a specific value between renders if you just want to use it.