Question

我有一个数组，我想在我的渲染函数中随机显示数组中的一项。这是我现在可以看到的所有项目：

C#

如何修改它以随机显示阵列中的仅一种产品？我根据另一个发现的问题尝试了此方法，但每次似乎都显示相同的产品：

render() {
    return (
        <article className="rand-product-cont">
            {this.state.products && this.state.products.map((product, index) => (
            <article key={index} className="rand-product">
                <h3>"{product.name}"</h3>
            </article>
            ))}
        </article>
    );
};

Answer 1

您的随机数生成器就像魅力一样工作。问题在于如何渲染产品，这些产品是您从products数组中选择的代码。

不使用map尝试以下操作：

render() {
    const product = this.state.products.sort(() => Math.random() - Math.random())
                                       .find(() => true);

    return (
        <article className="rand-product-cont">
            {product &&
                <article className="rand-product">
                    <h3>"{product.name}"</h3>
                </article>
            }
        </article>
    );
};

上述解决方案使用的方法与我在此处使用的类似，只用数字值表示products数组，find返回第一个元素，因此您不需要在{{1 }}数组：

products

我希望这会有所帮助！

Answer 2

如果只需要一个元素，并且它是随机的。我完全看不到使用地图的目的

  function getRandomElFromArray(arrayLenght) {
    return Math.floor(Math.random() * arrayLength);
  }

  <article ...
    {
      product && product.length > 0 &&
      product[getRandomElFromArray(product.length)]
    }
  </article>

React Map函数-随机返回一项

2 个答案: