如何在组件上查看阵列？/React/Javascript

我有这样一个元素：

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>

{DropdownElements.map（（x）=>{
返回(
onChange（z）}
onFocus={onFocus}
onSearch={onSearch}
>
);
})}

---

但在我的组件中，当我尝试像

console.log（props）

那样编写时，我的数据源是空数组。如何在组件上查看数据？我需要将数组设置为组件中的一种状态。

您的代码中似乎没有使用任何类型的状态

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

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

然后在组件中，使用该状态：

datasource={myData}  

---

您的对象正在更新，但视图未更新。要实现这一点，您需要有一个组件状态，我们可以更新到该状态并再次触发return以更新视图

const-App=（）=>{
const[myData，setMyData]=useState（DropdownElements）；
useffect（（）=>{
myData.map（（x，i）=>{
获取（x.apirl）
.然后（（z）=>z.json（））
。然后（（结果）=>{
myData[i]。数据=结果；
设置myData（myData）；
});
});
}, []);
返回(
{myData.map（（x）=>{
返回(
onChange（z）}
onFocus={onFocus}
onSearch={onSearch}
>
);
})}
);这里的
x
是什么？@ShivamJha
{DropdownElements.map（（x）=>{
它的map元素用于map my元素编辑：ohh.好的。你应该在一个状态下（使用钩子）退出你的
DropdownElements
，然后看看如何使用对象数组更改状态如果您有任何疑问，您可以将选择器包装到加载程序组件中：代码的主要问题是您直接更改状态（
x.data=vb
），这意味着React不会注意到更改，也不会重新渲染。