时间戳

首页 > 解决方案 > React Hooks：如何在选择元素内正确映射具有嵌套数组和对象的数组？（新编码器）

javascript - React Hooks：如何在选择元素内正确映射具有嵌套数组和对象的数组？（新编码器）

问题描述

目标是创建一个选择元素，将所有名称映射为带有反应挂钩的下拉列表，由于某种原因，它仅呈现第一个元素并出现未定义的错误，可以提供任何代码引用

import React from 'react';
import styles from './style.css'

const Traveler = () => {
    const travelers = [
        { title: "What kind of traveler are you?", name: [
            "Adrenaline Addicts", "Culture Lovers", "Aquatic adventures", "Beach enthusiasts", "Adventure seekers",
            "Party hoppers", "Motor fans"
        ] }
    ]

    return (
        <React.Fragment>
            <select type="text" name="Transportation" className={styles.select}>
                <option value="Transportation" className={styles.field} value={travelers[0].title}></option>  
                { travelers.map((item, index) => {
                    return(
                        <option>{item[0].name[index]}</option>
                    );
                })
            }
            </select> 

        </React.Fragment>
    );

}

export default Traveler;
````

标签： javascriptarraysreactjsarray.prototype.map

解决方案

问题似乎与数组上的映射有关。您将需要两个映射函数，一个用于travelers数组，第二个映射到name每个旅行者内部的数组。它看起来像这样。

{ travelers.map((traveler) => {
  return(
    <option value="Transportation" className={styles.field} value={traveler.title}></option>  
          {traveler.name.map((name) => <option>{name}</option>}
  );
})

推荐阅读