javascript - (React Native) 显示数组中项目的卡片列表

Question

我有两个数组，比方说 单词和定义

export default class Dictionary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        word: [],
        definition:[],
        index: 0
    };    
}

我有一个 Prop

<Card word = {w} definition = {d}/> 

我想为数组中的每个单词/定义对显示这些卡片的列表。如果有 5 个单词/定义，那么我希望其中 5 个卡片显示在 ScrollableView 中。我怎样才能做到这一点？谢谢!

Answer 1

您可以使用 Array.prototype.map Array.prototype.map 函数回调中的第二个参数是索引。您可以使用该索引来显示相应的definition项，如下所示

export default class Dictionary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        word: ["a","b","c"],
        definition:["a","b","c"],
        index: 0
    };    

    render() {
       <div>
       {this.state.word.map((w,i) => {
          return <Card word = {w} definition = {this.state.definition[i]}/> 
       })}
       </div>
    }
}