如何在我的组件上看到我的数组？ / 反应 / Javascript

Question

I have a element like:

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 : [],
  },
]

I fetching that url in App in useEffect.

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.

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

And i setting it like that:

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

But in my component when i try write like console.log(props) my datasource is empty array. How can i see my datas on my component? I need set my array to a state in my component.

Answer 1

It seems like you aren't using any kind of state in your code.

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

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

Then within your component, use that state:

datasource={myData}  

Answer 2

Your object is updating but not view. To achieve this you need have a component state, to which we can update and trigger return again to update view.

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