从字符串数组映射索引

Question

我正在尝试编写一个从数组中返回随机句子的代码。有点像随机报价机，除了页面上同时出现 3 个不同的报价。 这是它的外观

<div className="">
          {this.state.first.map((first) => (
            <div className="">{first}</div>
          ))}
        </div>
        <div className="">
          {this.state.second.map((second) => (
            <div className="">{second}</div>
          ))}
        </div>
        <div className="">
          {this.state.third.map((third) => (
            <div className="">{third}</div>
          ))}
        </div>

我想要做的是让 map 函数只从每个数组中返回一个。我这样做了。

 {this.state.first.map((first) => (
            <div className="">{first[0]}</div>
          ))} 

这给了我每个句子的第一个字母。但是我错过了什么让它给我整个句子而不是第一个字母？ 整个代码可以在这里查看 https://github.com/Imstupidpleasehelp/CovidConspiracyGenerator/blob/master/src/Slotmachine.jsx 预先感谢您的意见。
编辑澄清。当用户按下按钮时，我希望每个数组的随机索引显示到页面。我已经有一个函数可以给我一个 1 到 10 之间的随机数。我希望它能够像随机报价机一样工作。

Answer 1

由于您只需要句子数组中的一个元素，因此请访问 .first、.second、.third 数组的索引之一，而不是尝试 .map 它们。例如：

<div>{this.state.first[0]}</div>
<div>{this.state.second[0]}</div>
<div>{this.state.third[0]}</div>

更可能的是，您希望保存当前显示的索引状态，并有类似的内容：

<div>{this.state.first[this.state.firstIndex]}</div>
<div>{this.state.second[this.state.secondIndex]}</div>
<div>{this.state.third[this.state.thirdIndex]}</div>

其中firstIndex 将是一个从0 到n - 1 的数字，其中n 是this.state.first 的长度，以此类推第二个和第三个。要在 first 中选择新的随机引用，您可以：

this.setState({
  ...this.state,
  firstIndex: Math.floor(Math.random() * this.state.first.length)
});