如何使用变量作为反应中的键来渲染和映射对象

Question

我的任务是制作流行游戏节目《家庭仇恨》的克隆版。我无法找到一个很好的方法来获取 "rounds" 列表，每个列表都有一个问题和一系列答案（类似于）

const Data = {
  round_1: {
    question: "A question",
    answers: ["one answer", "second one", ...etc]
  },
  round_2: {
    question: ...,
    answers: [...]
  },
  ...etc
}

然后将相关的回合信息渲染到一个组件中，这样玩家就可以前进和后退，并且只将相关的回合信息映射到该组件。类似于：

// Gameboard.js
import React from 'react'
import {Data} from './data'
export default class extends React.Component {
  componentWillMount() {
    const round = 1
    const ansArray = []
    const roundQuestion = Data.round_`${round}`.question
    const roundAnswers = Data.round_`${round}`.answers.map(ans=>{
      ansArray.push(ans)
    })
    this.setState({
      question: roundQuestion,
      answers: roundAnswers
    })
  }
handlePrevRoundClick() {
  this.setState({set to prev round})
}
handleNextRoundClick() {
  this.setState....
}
  render() {
    return (
      <div>
      <RoundInfo roundNum={this.state.round}/>
      <Round answers={this.state.answers}/>
      </div>
    )
  }
}

那么显然组件 RoundInfo 和 Round 只是通过 props 传递了它们的信息。我已将它们排除在示例之外，因为我认为我所遵循的逻辑仅适用于此主要 "Gameboard" 组件。如有必要，我会非常乐意扩展。我也意识到这里可能有拼写错误和遗漏。如果有人需要更多内容，我很乐意 jsfiddle。我确实有一个工作原型，我手动创建了每一轮自己的组件，但这绝对不是 React 方式...

总而言之：我要求使用变量在对象列表之间来回 "walk" 的方法，只需将当前回合的信息映射到面板。

谢谢！

Answer 1

好像你已经完成了大部分工作。要完成您所做的事情：

// Gameboard.js
export default class extends React.Component {
  componentWillMount() {
    // init round to 0
    this.setState({
      round:0
    });
  }
  handlePrevRoundClick = () => {
    const round = this.state.round - 1;
    this.setState({round}); // update round
  }
  handleNextRoundClick= () => {
    const round = this.state.round + 1;
    this.setState({round}); // update round
  }
  render() {
    const curRoundData = Data['round_'+this.state.round];
    return (
      <div>
        <RoundInfo roundNum={this.state.round}/>
        <Round answers={curRoundData.answers}/>
        <div onClick={this.handlePrevRoundClick}>Go Prev</div>
        <div onClick={this.handleNextRoundClick}>Go Next</div>
      </div>
    )
  }
}

如何使用变量作为反应中的键来渲染和映射对象

How to render and map an object using a variable as a key in react

state

dictionary

filter

reactjs