未捕获类型错误：无法读取未定义的属性（读取“长度”）。 （与过去的问题不同）

Question

我要死了，我发誓。我有一个反应应用程序，我正在对烧瓶应用程序进行提取调用。我收到了我期望的格式的回复。但是，我收到错误：

未捕获类型错误：无法读取未定义的属性（读取“长度”）

我搞乱了制作数组、制作字符串等，但无济于事。下面是代码和响应。请注意，在我们有

.then(res+> { console.log("fetch request completed"):

的代码中，即使我们收到 TypeError，也不会记录日志。呃！

fetch(`${API_URL}/api/get_wine_recommendations`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(payload)
            })
            .then(res => {
                console.log("Fetch request completed");
                if (!res.ok) {
                    throw new Error(`HTTP error! Status: ${res.status}`);
                }
                return res.json();
            })
            .then(data => {
                console.log("Parsed JSON data:", data);
                setWineRecommendations(data);
                setIsLoading(false);
            })
            .catch(error => {
                console.error("Error fetching wine recommendations:", error);
                setIsLoading(false);
            });

        }

        return () => clearInterval(interval);
    }, [selectedItem]);

    const theme = useTheme();

    const handleClose = () => {
        setIsOpen(false);
    };

    return (
        <Drawer anchor="bottom" open={isOpen} onClose={handleClose}>
            <Box className="wine-recommendations" style={{ padding: theme.spacing(2) }}>
                {isLoading ? (
                    <Typography className="loading-text">{loadingMessages[loadingMessageIndex]}</Typography>
                ) : (
                    wineRecommendations && wineRecommendations.length > 0 ? (
                        <List>
                            {wineRecommendations.map((recommendation) => (
                                <ListItem key={recommendation.wine_name} divider>
                                    <Box padding={2}>
                                        <Typography variant="h5" className="wine-name">
                                            {recommendation.wine_name}
                                        </Typography>
                                        <Typography variant="body1" className="recommendation-reason">
                                            {recommendation.reasons.join('\n\n')}
                                        </Typography>
                                    </Box>
                                </ListItem>
                            ))}
                        </List>
                    ) : (
                        <Typography variant="h6" className="no-recommendations-text">No recommendations available.</Typography>
                    )
                )}
            </Box>
        </Drawer>
    );
}

WineRecommendationsSection.propTypes = {
    selectedItem: PropTypes.object,
    isOpen: PropTypes.bool.isRequired,
    setIsOpen: PropTypes.func.isRequired
};

看起来这里坏了：

wineRecommendations && wineRecommendations.length > 0 ? 

这是请求的响应：

[
    {
        "reasons": [
            "The fruity and vibrant notes of the Cruse Wine Co. Ultramarine Sparkling Rose will complement the fresh and crisp flavors of the GA Baby Lettuces dish.",
            "The effervescence of this sparkling wine will provide a delightful contrast to the textures of the lettuces, adding a refreshing element to each bite.",
            "The hints of red fruit and floral undertones in the Ultramarine Sparkling Rose will enhance the overall dining experience, creating a harmonious balance between the wine and the dish."
        ],
        "selected_item": "Cruse Wine Co. Ultramarine (Sparkling Rose, Sonoma Coast)",
        "wine_id": "ID:2",
        "wine_name": "Cruse Wine Co. Ultramarine",
        "wine_region": "Sonoma Coast",
        "wine_type": "Sparkling Rose"
    }
]

任何帮助将不胜感激！

Answer 1

非常感谢大家的帮助。能够通过删除动态加载消息来解决。这并不理想，因为 OpenAI 需要一生的时间才能得到响应，但解锁它真是太棒了。现在需要进行预处理和缓存。谢谢！