javascript - React Hooks : how to properly map an array with nested arrays and objects inside a select element?(新编码器)

Question

这个问题已经有答案了:

How to render nested array elements in React? (1 个回答)

已关闭 3 年前。

目标是创建一个选择元素，通过 react Hook 将所有名称映射为下拉菜单，由于某种原因，它仅渲染第一个元素并出现未定义的错误，可以提供任何代码引用

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;
````

Answer 1

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

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