React调用Webflow博客API时setCallData钩子无法存储数据

可能的问题点及解决办法 #

1. 初始渲染的日志干扰 #

组件首次渲染时，callData的初始值就是undefined，此时组件顶部的console.log(callData,'blogs')会先于useEffect中的请求执行，所以第一次打印必然是undefined——这是React的正常渲染流程，并非setCallData失效。

• 修正方式：通过监听callData的变化来打印更新后的值：

  useEffect(() => {
    console.log('更新后的博客数据:', callData);
  }, [callData]);
  

2. API响应结构不匹配 #

你默认返回的json包含items字段，但实际Webflow API的响应可能不符合预期，或者请求未成功返回有效数据。

• 修正方式：在请求成功后先打印完整的json结构，确认字段是否存在：

  const json = await response.json();
  console.log('API完整响应:', json); // 查看实际返回内容
  setCallData(json.items ?? []); // 用空数组兜底，避免后续map报错
  

3. 未处理HTTP错误状态码 #

fetch仅在网络故障时触发catch，如果API返回401（权限错误）、404（资源不存在）等状态码，不会进入catch分支，此时json.items可能不存在，导致setCallData存入undefined。

• 修正方式：添加响应状态检查：

  const response = await fetch('https://api.webflow.com/collections/6433ba761ddcb04783f42f94/items', options);
  if (!response.ok) {
    throw new Error(`请求失败: ${response.status}`); // 抛出HTTP错误进入catch
  }
  

修改后的完整代码 #

const BlogSection = () => {
    const [callData, setCallData] = useState([]); // 初始值设为空数组，避免map报错

    useEffect(() => {
        const options = {
            method: 'GET',
            headers: {
                accept: 'application/json',
                authorization: 'Bearer 8ea2c9fa8594d39ba34541182ceed3edc0752db7b5a09438dc0a3651116bc4a6'
            }
        };

        const fetchBlogs = async () => {
            try {
                const response = await fetch('https://api.webflow.com/collections/6433ba761ddcb04783f42f94/items', options);
                if (!response.ok) {
                    throw new Error(`HTTP错误: ${response.status}`);
                }
                const json = await response.json();
                console.log('API响应内容:', json);
                setCallData(json.items ?? []);
            } catch (error) {
                console.error('获取博客数据失败:', error);
            }
        };

        fetchBlogs();
    }, []);

    // 监听数据变化打印更新后的值
    useEffect(() => {
        console.log('当前博客数据:', callData);
    }, [callData]);

    return (
        <>
            {callData.map((blog, index) => (
                <p key={index}>{blog.name}</p> // 添加key属性避免React警告
            ))}
        </>
    );
};

export default BlogSection;

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