如何从对象数组中随机只显示一个1图像

Question

如何随机显示单张图片?我已经创建了一个对象数组，其中添加了图像，现在我需要随机显示这些图像，但一次一个，它将在下一次重新加载时发生变化。

const index= () => {
let gifGallery=[
{
src:'./Images/1.gif',
value:1
},
{
src:'./Images/2.gif',
value:2
},
{
src:'./Images/3.gif',
value:3
},
{
src:'./Images/4.gif',
value:4
},

]
return (
<>
<h1>Gif Gallery</h1>
<div>
{
what should be the logic here?????
}
</div>
</>
)
}

Answer 1

使用此代码

function getRandomImage(arr) {
const length = arr.length;
const randomIndex = Math.floor(length * Math.random())
return arr[randomIndex]
}

Answer 2

You can get a random value from an array of objects and use it in your return method.
let gifGallery=[
{
src:'./Images/1.gif',
value:1
},
{
src:'./Images/2.gif',
value:2
},
{
src:'./Images/3.gif',
value:3
},
{
src:'./Images/4.gif',
value:4
},
]
var randomObject = gifGallery[Math.floor(Math.random() * gifGallery.length)];
return (
<>
<h1>Gif Gallery</h1>
<div>
<image src={randomObject.src} alt={randomObject.value} />
</div>
</>
)

Answer 3

使用Math.floor()，你可以在这个链接上看到文档，我希望这对你有帮助。由于

let gifGallery=[
{
src:'./Images/1.gif',
value:1
},
{
src:'./Images/2.gif',
value:2
},
{
src:'./Images/3.gif',
value:3
},
{
src:'./Images/4.gif',
value:4
},

]

const randomImage = Math.floor(Math.random() * gifGallery.length)
console.log(randomImage)

const index= () => {
let gifGallery=[
{
src:'./Images/1.gif',
value:1
},
{
src:'./Images/2.gif',
value:2
},
{
src:'./Images/3.gif',
value:3
},
{
src:'./Images/4.gif',
value:4
},

]
const randomImage = Math.floor(Math.random() * gifGallery.length)
return (
<>
<h1>Gif Gallery</h1>
<div>
<img src={gifGallery[randomImage].src} />
</div>
</>
)
}

Answer 4

一种方法是生成一个介于0和图像数组的最后一个索引之间的随机数。理想情况下，您应该将其存储在useState中，以便您可以在需要时更改它(例如，您有一个按钮显示"随机获取gif")。

你需要一个像这样的函数来生成randomIdx:

const getRandomIdx = ()  => Math.floor(Math.random() * gifGallery.length)

创建这些函数的方法在这里有很好的解释。

然后，您将在JSX中放入<img />标记，其src属性存储在gifGallery[randomIdx]对象的src属性中。

const gifGallery=[
{
src:'./Images/1.gif',
value:1
},
{
src:'./Images/2.gif',
value:2
},
{
src:'./Images/3.gif',
value:3
},
{
src:'./Images/4.gif',
value:4
},

]
const getRandomIdx = ()  => Math.floor(Math.random() * gifGallery.length)
const App = () => {
const [randomIdx, setRandomIdx] = useState(getRandomIdx())

return (
<>
<h1>Gif Gallery</h1>
<div>
<img src={gifGallery[randomIdx].src} />
</div>
<p>Idx : {randomIdx}</p>
<button onClick={() => setRandomIdx(getRandomIdx())}>
get another random one
</button>
</>
)
}

你有一个工作的例子在这个React Playground