React JS 多國 state 下拉菜單

Question

我正在嘗試通過數組 map 創建一個包含多個國家及其相關州的下拉菜單。 我的數組如下所示（節省時間/長度的簡短版本）：

[
    {
        "country" : "USA",
        "states" : {
            "name" : ["Alabama", "Alaska"],
            "value" : ["AL", "AK"]
        }
    },
    {
        "country" : "Mexico",
        "states" : {
            "name" : ["Aguascalientes", "Baja California"],
            "value" : ["AG", "BC"]
        }
    }


]

我嘗試執行以下操作：

import React from 'react';
import data from './allstates.json';

const StateDrop = () => {

    return (
        <div >
            <select>
                 {data.map(item => (
                    <optgroup label={item.country}>
                        <option key={item.states.name} value={item.states.value}>{item.states.name}</option>
                    </optgroup>
                ))}
            </select> 
        </div>
     );
}
 
export default StateDrop;

但它在一個選項中列出了所有名稱。 我嘗試在名稱上使用擴展運算符，但它說在 React 中不允許擴展子級。

我知道我可以在他們自己的 optgroup div 下的那些 arrays 上列出我的狀態數據和 map 的 3 個列表，但我想知道是否有一種類似於我當前方法的方法來完成這個？ 我可以找到帶有嵌套 arrays 的 json object 但沒有任何可靠的信息在這里或以其他方式指向解決方案的方向。 我的第一個想法是使用擴展運算符將名稱放入他們自己的數組中，但這不起作用。 任何建議都會非常有幫助。 我想也許我需要有 useState 並在那里添加國家/州，但我看不出有什么不同。

Answer 1

這是你的目標嗎？

  export default function App() {
  return (
    <div>
      <select>
        {data.map(item => (
          <optgroup key={item.country} label={item.country}>
            {item.states.name.map((x, i) => (
              <option key={x} value={item.states.value[i]}>
                {x}
              </option>
            ))}
          </optgroup>
        ))}
      </select>
    </div>
  );
}

它假定在一個國家/地區內，第 i 個value對應於第 i 個name 。 如果你重組你的data ，你可以使代碼更清晰：如果你把item.states變成如下形式的對象數組： {name, value} ，它會變得更容易呈現options 。