Question

我有以下代码：

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

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

我知道如何更改像这样的对象的值：

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

但是在这种情况下，我陷入了困境，无法根据出现的问题找到如何访问和更改它的方法。

完整代码如下：

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}
]

export {truth, dare};

App.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;

我是编程方面的新手，我正在努力使自己成为一个真理或敢于游戏以学习反应。我已经读过有关数组和对象的信息，但是我很困惑，找不到我想要的东西。

提前谢谢！

Answer 1

尝试这样的事情：

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。

Answer 2

您可以过滤掉所有尚未出现的胆量或真理，随机选择其中之一，然后在原始数组中更改该对象的hasAppeard字段。

示例

class App extends React.Component {
  state = {
    currQuest: null,
    truth: [
      { question: "Question 1", hasAppeard: false },
      { question: "Question 2", hasAppeard: false },
      { question: "Question 3", hasAppeard: false },
      { question: "Question 4", hasAppeard: false }
    ],
    dare: [
      { question: "Question 5", hasAppeard: false },
      { question: "Question 6", hasAppeard: false },
      { question: "Question 7", hasAppeard: false },
      { question: "Question 8", hasAppeard: false }
    ]
  };

  handleRandomTruth = () => {
    this.setState(prevState => {
      const truth = [...prevState.truth];
      const unappearedTruths = truth.filter(t => !t.hasAppeard);
      const randomIndex = Math.floor(Math.random() * unappearedTruths.length);
      const truthIndex = truth.indexOf(unappearedTruths[randomIndex]);

      truth[truthIndex] = { ...truth[truthIndex], hasAppeard: true };

      return { truth, currQuest: unappearedTruths[randomIndex] };
    });
  };

  handleRandomDare = () => {
    this.setState(prevState => {
      const dare = [...prevState.dare];
      const unappearedDares = dare.filter(d => !d.hasAppeard);
      const randomIndex = Math.floor(Math.random() * unappearedDares.length);
      const dareIndex = dare.indexOf(unappearedDares[randomIndex]);

      dare[dareIndex] = { ...dare[dareIndex], hasAppeard: true };

      return { dare, currQuest: unappearedDares[randomIndex] };
    });
  };

  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>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 3

您需要首先使用基于数字的访问来访问对象，然后更改该对象的属性。

更改真值数组的第三个对象的hasAppeard的示例如下：

const truth = [
  {question: "Question 1", hasAppeard: false},
  {question: "Question 2", hasAppeard: false},
  {question: "Question 3", hasAppeard: false},
  {question: "Question 4", hasAppeard: false}
];

truth[2].hasAppeard = true; // array index starts at 0

console.log(truth);

Answer 4

那呢？：

handleRandomTruth = () => {
   let q = truth[Math.floor(Math.random() * truth.length)]
   const retries = 10
   while (q.hasAppeard === true && retries-- >= 0)
       q = truth[Math.floor(Math.random() * truth.length)]
   q.hasAppeard = true
   this.setState({
       currQuest: q
   })
}

更改数组内的对象属性名称的值

4 个答案: