时间戳

首页 > 解决方案 > 更改数组中对象属性名称的值

javascript - 更改数组中对象属性名称的值

问题描述

我有以下代码：

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

当问题出现时，我正在尝试更改 to 的值，hasAppeard以便我可以过滤问题并仅显示未再次出现的问题。trueonClick

我知道如何更改对象的值，例如：

const something = {
  a: false,
  b: false
}
something.b = true

但在这种情况下，我被卡住了，无法根据出现的问题找到如何访问和更改它。

完整代码如下：

问题.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}
]

export {truth, dare};

应用程序.js

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="timer">
       <CountdownTimer />
     </div>

     <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>
  );
 }
}

export default App;

我是编程新手，我正在尝试制作一个真心话大冒险游戏来学习反应。我已阅读有关数组和对象的信息，但我很困惑，找不到我要找的东西。

先感谢您！

标签： javascriptarraysreactjsobject

解决方案

尝试这样的事情：

handleRandomTruth = () => {
  let validTruths = truth.filter(t => !t.hasAppeard);
  let randomNum = Math.floor(Math.random() * validTruths.length);
  this.setState({
    currQuest: validTruths[randomNum]
  })
  truth[randomNum].hasAppeard = true
}

同样的逻辑dare也很有吸引力。

推荐阅读