竞争条件:执行条件渲染以生成MenuItems时，Material UI Select认为值超出范围

Question

我正在使用Material UI为我的仪表板创建一些Selects。"选择"中的MenuItems(选项(是使用条件渲染生成的。我使用map返回MenuItems，它基于从远程API检索的数组中的一组选项列表。Select的值也是根据从远程API检索到的值确定的。API响应后，defaultValue将更新为实际值。

以下是组件的相关部分：

<Select
MenuProps={{
className: classes.selectMenu,
}}
classes={{
select: classes.select,
}}
id={id}
name={name}
defaultValue={defaultValue}
value={value}
onChange={onChange}
>
<MenuItem
disabled
classes={{
root: classes.selectMenuItem,
}}
value={0}
>
{labelText}
</MenuItem>
{selectOptions.map(opt =>
<MenuItem
classes={{
root: classes.selectMenuItem,
selected: classes.selectMenuItemSelected,
}}
value={opt.IDX}
key={`${name}${opt.IDX}`}
>
{opt.Name}
</MenuItem>)}
</Select>

每个选项都有一个IDX属性和一个name属性。因此，例如，下拉列表中的用户列表将显示Bob、Sally和Jeff，相对于Bob、Salley和Jeff的ID号，值为1,2,3等。正如您所看到的，有一个指定值为0的默认选项和一个defaultValue道具。

我在JS控制台中收到以下警告：

You have provided an out-of-range value `1` for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are `0`.

我只能假设这是因为React直到条件渲染的MenuItems被渲染后才知道它们，此时远程API可能已经响应，并且Select组件的值已经设置为defaultValue之外的值。

这似乎不会以任何方式影响代码功能，但这是一个竞争条件，我不喜欢它。在设置父选择组件的值之前，有没有方法进行检查，以确保我的组件具有所有可用的MenuItems及其值？

我想在JSX中设置一些类似isFullyProcessed布尔值的东西，然后使用它。

编辑：

以下是我在父页面上获取数据的方式。明细表和组是选项数据，用户是值的来源。

useEffect(() => {
axios.get(`${server}${uPath}/data`).then((response) => {
const parsed = JSON.parse(response.data);
setSchedules(parsed.schedules);
setGroups(parsed.groups);
setUser(parsed.user);

Answer 1

正如所评论的，这是通过等待呈现直到从API检索到所有数据来解决的。显然，尽管API对设置值和设置菜单选项的调用是在同一个函数中完成的，因为我使用两个单独的状态来存储这些信息，所以可以在与菜单选项呈现不同的呈现周期中设置值。

我添加了一个isLoading布尔值，并等待useeffect从API返回数据，这解决了问题。这里的快速教程。