从数组 onClick 渲染一个对象答案

【问题标题】：Render an object from array onClick从数组 onClick 渲染一个对象
【发布时间】：2018-07-17 16:07:37
【问题描述】：

我想从每个数组中呈现一个问题 onClick。如果我单击真值数组应该从该数组中呈现一个问题，如果我单击敢数组做同样的事情。我的项目是使用 reactjs 创建一个真心话大冒险游戏，因为我想从中学习。

我的代码如下：

Questions.js

const truth = [
  {question: "Question 1", hasAppeard: false},
  {question: "Question 2", hasAppeard: false},
  {question: "Question 3", hasAppeard: false},
  {question: "Question 4", hasAppeard: false}
]

const dare = [
  {question: "Question 5", hasAppeard: false},
  {question: "Question 6", hasAppeard: false},
  {question: "Question 7", hasAppeard: false},
  {question: "Question 8", hasAppeard: false}
]

App.js

class App extends Component {
  constructor() {
  super();
  this.state = {
    truthQuest: null,
    dareQuest: null
  }
}

handleRandomTruth = () => {
  this.setState({
  truthQuest: Math.round(Math.random() * 9 + 1)
  })
}

handleRandomDare = () => {
  this.setState({
  dareQuest: Math.round(Math.random() * 9 + 1)
  })
}

render() {
  return (
    <div className="App">
      <div className="timer">
        <CountdownTimer />
      </div>

      <div className="current-player">
        <h3>current player</h3>
      </div>

      <div className="next-player">
        <h3>next player</h3>
      </div>

      <div className="questions">
         {truth[Object.keys(this.state.truthQuest
         {dare[this.state.dareQuest]}
      </div>

      <button className="btn-truth" onClick= 
       {this.handleRandomTruth}>Truth</button>
      <button className="btn-dare" onClick= 
       {this.handleRandomDare}>Dare</button>
      <button className="btn-home" >Home</button>
  </div>

谢谢！

【问题讨论】：

到目前为止您尝试过什么？您是否尝试过以任何方式使用您的 truthQuest 和 dareQuest 变量？
{truth[Object.keys(this.state.truthQuest 的目的是什么？这是一个语法错误。此外，您将一次显示 2 个问题。您需要将真实/大胆的问题呈现在 if 语句中，以检查您要显示哪种类型的问题

标签： javascript arrays reactjs object

【解决方案1】：

为了一次只显示 1 个问题，在您的组件 HTML 中，您可以在您的状态上设置一个 currQuestion 变量，而不是单独的真/敢问题，因为这是不必要的。我还做了一些其他的小改动，因为它们让事情变得更简单。

class App extends Component {
  constructor() {
  super();
  this.state = {
    currQuest: null
  }
}

handleRandomTruth = () => {
  this.setState({
    currQuest: truth[Math.floor(Math.random() * truth.length)]
  })
}

handleRandomDare = () => {
  this.setState({
    currQuest: dare[Math.floor(Math.random() * dare.length)]
  })
}

render() {
  return (
    <div className="App">

      <div className="current-player">
        <h3>current player</h3>
      </div>

      <div className="next-player">
        <h3>next player</h3>
      </div>

      <div className="questions">
         {this.state.currQuest ? <div>{this.state.currQuest.question}</div> : ''}
      </div>

      <button className="btn-truth" onClick= 
       {this.handleRandomTruth}>Truth</button>
      <button className="btn-dare" onClick= 
       {this.handleRandomDare}>Dare</button>
      <button className="btn-home" >Home</button>
  </div>
  )};
}

【讨论】：