如何在我的組件上看到我的數組？ / 反應 / Javascript

Question

我有一個元素：

const DropdownElements = [
  {
    key: 1,
    title: "Şehir",
    placeholder: "Şehir Seçiniz",
    apiUrl: "https://api.npoint.io/995de746afde6410e3bd",
    type: "city",
    selecteditem: "",
    data : [],
  },
  {
    key: 2,
    title: "İlçe",
    placeholder: "İlçe Seçiniz",
    apiUrl: "https://api.npoint.io/fc801dbd3fc23c2c1679", // its my apis. They hold datas from json
    type: "district",
    selecteditem: "",
    data : [],
  },
]

我在useEffect的應用程序中獲取url。

const App = () => {
     useEffect(() => {
    DropdownElements.map((x) => {
     
      fetch(x.apiUrl)
        .then((z) => z.json())
        .then((vb) => {
         x.data=vb  // If i write x.data.push(vb) i can see it on my component but its not giving pure array.
         console.log(x.data) // I can see my datas perfectly. I trying fill my data.

          
            
         
        });
      
    });
    
  }, []);

我這樣設置：

 <Space>
      {DropdownElements.map((x) => {
        return (
        
          <PickerCompanent
            showSearch
            selecteditem={idhold}
            key={x.key}
            
            placeholder={x.placeholder}
            type={x.type}
            datasource={x.data}  // I gave my datasource x.data that i filled .
            onFocus={onFocus}
            onChange={z=>onChange(z)}
            onFocus={onFocus}
            onSearch={onSearch}
          ></PickerCompanent>
        );
      })}
    </Space>

但是在我的組件中，當我嘗試像console.log(props)這樣編寫時，我的數據源是空數組。 如何查看組件上的數據？ 我需要在我的組件中將我的數組設置為 state。

Answer 1

您的代碼中似乎沒有使用任何類型的 state。

const App = () => {


 const [myData, setMyData] = useState();

     useEffect(() => {
         DropdownElements.map((x) => {
     
              fetch(x.apiUrl)
        .then((z) => z.json())
        .then((vb) => {
         x.data=vb  // If i write x.data.push(vb) i can see it on my component but its not giving pure array.
         console.log(x.data) // I can see my datas perfectly. I trying fill my data.
         // in here you'll want to be adding your data to some state
       // e.g. 
       setMyData(x.data); 

          
            
         
        });
      
    });
    
  }, []);

然后在您的組件中，使用該 state：

datasource={myData}  

Answer 2

您的 object 正在更新但未查看。 為此，您需要一個組件 state，我們可以更新並再次觸發返回以更新視圖。

 const App = () => { const [myData, setMyData] = useState(DropdownElements); useEffect(() => { myData.map((x, i) => { fetch(x.apiUrl).then((z) => z.json()).then((result) => { myData[i].data = result; setMyData(myData); }); }); }, []); return ( <Space> {myData.map((x) => { return ( <PickerCompanent showSearch selecteditem={idhold} key={x.key} placeholder={x.placeholder} type={x.type} datasource={x.data} // I gave my datasource x.data that i filled. onFocus={onFocus} onChange={z=>onChange(z)} onFocus={onFocus} onSearch={onSearch} ></PickerCompanent> ); })} </Space> );