如何解决Autocomplete组件options因请求未完成导致的未定义警告？

我有一个函数，从URL获取JSON数组，该数组包含我想在Autocomplete组件中作为选项展示的列表。

function ShowMovies() {
    async function GetMovies() {
        movies_list = await fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'authorization': token
            },
        }).then(response => movies_list = response.json());
    }
    GetMovies();

    return ( <Autocomplete multiple freeSolo disablePortal id = 'movies'
        name = 'movies'
        options = {
            movies_list
        }
        getOptionLabel = {
            (option) => option.movie_name
        }
        renderInput = {
            (params) => < TextField {
                ...params
            }
            label = 'New movies:' / >
        }
        />
    );
    export default ShowMovies;

但这段代码无法加载返回的选项，并且出现以下警告。我理解这是因为在绑定数据到组件时，fetch请求仍在进行中。

Warning: Failed prop type: The prop `options` is marked as required in `ForwardRef(Autocomplete)`, but its value is `undefined`.

请问如何延迟数据绑定直到请求完成？

核心问题是未通过React状态管理异步数据，且直接调用异步函数不会触发组件重新渲染。修改方案如下：

1. 用useState定义状态存储电影列表，初始值设为空数组（避免undefined触发警告）
2. 用useEffect在组件挂载时执行异步请求，请求完成后更新状态
3. 优化异步函数写法，去掉不必要的then嵌套

修改后的代码：

import { useState, useEffect } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

function ShowMovies() {
    const [moviesList, setMoviesList] = useState([]);

    useEffect(() => {
        async function getMovies() {
            try {
                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'authorization': token
                    },
                });
                const data = await response.json();
                setMoviesList(data);
            } catch (error) {
                console.error('获取电影列表失败:', error);
                // 可在此添加错误处理逻辑，比如保留空数组或展示错误提示
            }
        }
        getMovies();
    }, []);

    return (
        <Autocomplete
            multiple
            freeSolo
            disablePortal
            id='movies'
            name='movies'
            options={moviesList}
            getOptionLabel={(option) => option.movie_name}
            renderInput={(params) => <TextField {...params} label='New movies:' />}
        />
    );
}

export default ShowMovies;

关键说明： #

• useState管理moviesList，初始空数组直接解决options为undefined的警告
• useEffect配合空依赖数组，保证请求仅在组件首次渲染时执行一次
• try/catch捕获请求错误，避免程序意外崩溃
• 请求完成后调用setMoviesList更新状态，触发组件重新渲染，此时Autocomplete就能拿到正确的选项数据

内容的提问来源于stack exchange，提问作者user971741