我正在制作一个随机图像生成器,它需要显示14个随机图像。这是有效的,但是这14个随机图像在一次调用中被其他图像替换了3次。
我不希望这种情况发生,但我不知道如何阻止它。我认为是math.random()导致了这个问题,但我不确定。我正在React.JS上运行此脚本
我的代码:
for (var g=0; g < 14; g++) {
var rdmNumber = Math.floor(Math.random() * 14) + 1;
var imgName = "img_" + rdmNumber +".png";
var src = "img" + "/" + imgName;
indents.push(<div className="item-picture" key={c}><img src= {src8}className="item-img" alt="Your possible winnings" /></div>);
}
indents.push是my call的输出,显示如下:
{indents}
来自正在发生的事情的.gif:https://gyazo.com/c576c52a90843a9ab055790610303fe4
提前谢谢。
编辑我不需要独特的图像,我只希望它们保持不变,而不是像在.gif中看到的那样进行替换
发布于 2018-06-25 02:02:48
您可能已经在render函数中编写了此代码,该函数将在每次发生更改时运行。
试着用componentWillMount编写这段代码。
发布于 2018-06-25 01:56:01
你想要的是在render之外创建一个随机图像数组,然后渲染它。
在组件外部或在构造函数中执行此操作。
// outside of your component
let images = []
for (var g=0; g < 14; g++) {
var rdmNumber = Math.floor(Math.random() * 14) + 1;
var imgName = "img_" + rdmNumber +".png";
var src = "img" + "/" + imgName;
images.push(src);
}
// in your component's render method
images.forEach(url =>
indents.push(<div className="item-picture" key={url}>
<img src= {url}className="item-img" alt="Your possible winnings"/>
</div>)
)
// and you can render {indents} somewhere after that
https://stackoverflow.com/questions/51012531
复制相似问题