Question

我正在制作一个随机图像生成器，它需要显示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是我的呼叫的输出，显示如下：

{indents}

.gif来自发生的事情： https://gyazo.com/c576c52a90843a9ab055790610303fe4

谢谢。

编辑我不需要唯一的图像，我只希望它们保持不变，而不是像.gif那样替换

Answer 1

您可能已经在render函数中编写了此代码，该代码将在每次更改时运行。

尝试在componentWillMount中编写此代码。

Answer 2

您想要的是在渲染外部创建一次随机图像数组，然后进行渲染。

在组件外部或在构造函数中执行。

// 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

Math.random（）运行多次

2 个答案: