Reactjs 无法覆盖Typescript中的局部变量

我试图使用Typescript中函数调用返回的动态项列表创建一个下拉列表，但在覆盖代码中定义的变量并不断获取其初始值作为返回时遇到了问题

我能够很好地读取函数返回的下拉项的值，但无法将这些值分配给下拉项参数。这是我的代码：

let tempList: myObject[] = []; //unable to overwrite

const myComponent = () => {

  let dropdownItems=[{label: ""}]; //unable to overwrite
  
  fetchAllDropdownItems().then((x)=> tempList = x).catch((err)=> console.log(err))

  //Converting myObject array to a neutral array
  myList.forEach((y)=> dropdownItems.push(y))

  console.log(tempList) // returns [{label: "A"}, {label: "B"}]
  console.log(dropdownItems)// returns [{label: ""}, {label: "A"}, {label: "B"}]

  return (
    <GridContainer>
      <GridItem>
        <Dropdown
          items={dropdownItems} // results in initial value of dropdownItems i.e {label: ""}
          onChange={(e) => {
            console.log(e?.value)
          }}
          placeholder="Select an option"
        />
      </GridItem>
    </GridContainer>
  );
};

export default myComponent;

以前，我在下拉列表中将项定义为

items={[{label:“A”}，{label:“B”}]}

，这与我从

fetchAllDropdownItems

-函数返回中得到的结构基本相同，但我的目标是不硬编码项

---

我需要帮助找出我无法覆盖变量的原因，并希望得到任何建议。提前感谢。

问题不在于您没有更新

模板列表，而是您的组件在您更新之前进行了渲染，并且没有任何东西告诉它重新渲染，因为您没有使用该列表作为状态

根据所显示的代码结构，您有两个选项：

让整个模块等待从服务器获取列表，甚至在导出组件之前，使用（在现代bunders中得到良好支持的第3阶段提案即将进入第4阶段[“完成”]）

或


收到列表后，让组件重新渲染


下面是#1的一个例子：

const-dropdownItems:myObject[]=wait-fetchAllDropdownItems（）；
//顶层等待−−−−−−−−−−−−−−−^
常量myComponent=（）=>{
返回(
{
控制台日志（e？值）
}}
占位符=“选择一个选项”
/>
);
};
导出默认myComponent；

请再次注意，它将项加载一次，然后重用它们，并在加载此模块时加载它们。这意味着即使您的组件从未实际使用过，它也可能会加载这些项

有很多不同的旋转方式

以下是其中之一：

const-dropdownItems:Promise=fetchAllDropdownItems（）；
常量myComponent=（）=>{
const[items，setItems]=useState（null）；
useffect（（）=>{
让unmounted=false；
下拉项
。然后（项目=>{
如果（！已卸载）{
设置项目（项目）；
}
})
.catch（错误=>{
//…处理/显示加载项目时出错。。。
});
return（）=>{
未安装=正确；
};
}, []);
返回(
{
控制台日志（e？值）
}}
占位符=“选择一个选项”
/>
);
};
导出默认myComponent；

一旦加载模块，它就会主动加载项，因此，像#1一样，即使您的组件从未使用过，它也会加载项，但这意味着（可能）这些项就在那里，并且可以在组件首次使用时使用

但最后一段中的“可能”只是：在使用组件之前，获取可能仍然是未解决的。这就是组件使用承诺的原因。这意味着在该示例中，组件将始终呈现两次：一次为空，然后再次呈现列表。这会很快，但会有两次。如果项目已加载，则只执行一次是可能的，但会使代码明显复杂化：

let-dropdownItems:myObject[]| null=null；
const dropdownItemsPromise：承诺
=fetchAllDropdownItems（）。然后（items=>{
dropdownItems=项目；
退货项目；
})
.catch（错误=>{
//…处理/显示加载项目时出错。。。
});
常量myComponent=（）=>{
const[items，setItems]=useState（dropdownItems）；
useffect（（）=>{
让unmounted=false；
如果（项===null）{
dropdownItemsPromise.then（items=>{
如果（！已卸载）{
设置项目（项目）；
}
});
}
return（）=>{
未安装=正确；
};
}，[项目]；
返回(
{
控制台日志（e？值）
}}
占位符=“选择一个选项”
/>
);
};
导出默认myComponent；

或者，您可能希望等到第一次使用组件时再加载项目：

let-dropdownItems:myObject[]| null=null；
常量myComponent=（）=>{
const[items，setItems]=useState（dropdownItems）；
useffect（（）=>{
让unmounted=false；
如果（项===null）{
fetchAllDropdownItems（）。然后（items=>{
dropdownItems=项目；
如果（！已卸载）{
设置项目（项目）；
}
})
.catch（错误=>{
如果（！已卸载）{
//…处理/显示加载项目时出错。。。
}
});
}
return（）=>{
未安装=正确；
};
}，[项目]；
返回(
{
控制台日志（e？值）
}}
占位符=“选择一个选项”
/>
);
};
导出默认myComponent；

或者，您可能希望在每次使用组件时加载这些项（可能它们会随着时间的推移而变化，或者组件很少使用，并且在代码中缓存它们似乎是不必要的）：

constmycomponent=（）=>{
const[items，setItems]=useState（dropdownItems）；
useffect（（）=>{
让unmounted=false；
fetchAllDropdownItems（）。然后（items=>{
如果（！已卸载）{
设置项目（项目）；
}
})
.catch（错误=>{
如果（！已卸载）{
//…处理/显示加载项目时出错。。。
}
});
return（）=>{
未安装=正确；
};
}，[项目]；
返回(
{
控制台日志（e？值）
}}
占位符=“选择一个选项”
/>
);
};
导出默认myComponent；

您应该在

useffect（）

中进行api调用，并将

下拉项定义为状态i
export interface myObject {
    label: string;
}