react-select中的ReactJS物件陣列資料結構

希望我們做偉大的家庭？我相信。我在一個單獨的 js 檔案中有一個資料物件，我想將它系結到一個 react-select，以便可以動態填充 react-select 下拉串列。資料物件是這樣的：

    =======DDLListValues.js=======

export const countryListObject = [
    {label: "Afghanistan", value: "Afghanistan"},
    {label: "Albania", value: "Albania"},
    {label: "?land Islands", value: "?land Islands"},
    {label: "Algeria", value: "Algeria"},
    {label: "American Samoa", value: "American Samoa"},
    {label: "Andorra", value: "Andorra"},
];

export const stateList = [
    Afghanistan: [
          "Abc",
          "efg",
          "hij",
          "klm",         
        ],
        Albania: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
      Algeria: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
       American Samoa: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
       Andorra: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
];

我想要實作的目標我有兩個依賴的 react-select 下拉串列，我將 countryListObject 系結到第一個下拉選擇和第一個 react-select 的 onchange，它應該自動填充第二個 react-select 下拉串列，并使用相應的選定值javascript 檔案中 stateListObject 中的國家 react-select 下拉串列，即它檢查 stateListObject 并選擇與所選國家值對應的內部陣列。

我的代碼如下：

在我的 reactjs 檔案中，我有以下內容：

    =========Reactform.js

import { countryListObject, stateListObject } from './DDLListValues';

const [selectedcountry, setSelectedcountry] = useState({});
const [selectedstate, setSelectedstate] = useState({});

const [countries, setCountries] = useState(countryListObject);
const [stateoforigin, setStateoforigin] = useState({}); 

const onChangeCountry = (obj) => {
  setSelectedcountry(obj);
}

const onChangeState = (obj) => {
  setSelectedstate(obj);
}


{/* Binded countryListObject getting selected value successfully  */}
<Select name="countries" 
placeholder="Select your country"
value={selectedcountry}
options={ countryListObject } 
getOptionLabel={(option) => option.label}
getOptionValue={(option) => option.label}
onChange={(option) => onChangeCountry(option)}
/>

{/* I don't know how to accomplish this */}
<Select 
placeholder="States"
value={}
options={} 
onchange={} 
/>

提前感謝各位大佬

uj5u.com熱心網友回復：

感謝 Vini 為回答這個問題所付出的努力和時間，但我有狀態陣列，我在問題中分享了它。看看它下面： -

    export const stateListObject = [
    Afghanistan: [
          "Abc",
          "efg",
          "hij",
          "klm",         
        ],
        Albania: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
      Algeria: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
       American Samoa: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
       Andorra: [
         "Abc",
          "efg",
          "hij",
          "klm",   
        ],
];

狀態陣列是這樣好還是我應該像 {label,value} 這樣將每個國家/地區的值包裝在狀態陣列中？但請注意，我只是在選擇國家下拉串列時填充狀態下拉串列，但您的解決方案看起來像是在國家下拉串列中填充人口。

uj5u.com熱心網友回復：

處理：

export const countryListObject = [
    {label: "Afghanistan", value: "Afghanistan", key: 'af'},
    {label: "Albania", value: "Albania", key: 'al'},
    {label: "?land Islands", value: "?land Islands", key: 'ai'},
    {label: "Algeria", value: "Algeria", key: 'alg'},
    {label: "American Samoa", value: "American Samoa", key: 'as'},
    {label: "Andorra", value: "Andorra", key: 'an'},
];

export const stateListObject = {
    af: [
          {label: "ABC", value: "ABC"},
          ......
        ],
        al: [
          {label: "ABC", value: "ABC"},
          ......  
        ],
      alg: [
          {label: "ABC", value: "ABC"},
          ......  
        ],
       as: [
          {label: "ABC", value: "ABC"},
          ...... 
        ],
       an: [
          {label: "ABC", value: "ABC"},
          ......  
        ],
};

const [states, setStates] = useState([]);
const onChangeCountry = (obj) => {
  setSelectedcountry(obj);
  setStates(stateListObject[obj.key]);
}

uj5u.com熱心網友回復：

首先，您需要將您的狀態物件鍵轉換為一個陣列（我假設它是一個物件并且您犯了語法錯誤），然后迭代以查找國家/地區。

const onChangeState = (obj) => {
  setSelectedstate(obj);
  
  const stateCountryName = Object.keys(stateList).find((countryName) => {
    const isStateCountry = stateList[countryName].indexOf(obj.value) > -1;
    
    if (isStateCountry) return true;
    return false;
  })

 const countryObj = countryArray.find((country) => country.label === stateCountryName)
 
 onChangeCountry(countryObj);
}

標籤：javascript 反应 数组对象

上一篇：自定義圖示包裝組件

下一篇：在React中對父組件使用過濾器時更新子組件