如何在React中用Hooks调用Laravel的RESTful API并展示指定字段

没问题，我来一步步帮你实现这个需求，下面是完整的代码示例和详细解释：

完整React组件实现 #

首先创建一个React组件，用useState管理数据状态，useEffect发起API请求，最后只渲染你需要的nm_cabang和deskripsi字段：

import { useState, useEffect } from 'react';

function CabangList() {
  // 初始化状态：存储接口返回的数据、加载状态、错误信息
  const [cabangs, setCabangs] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 定义异步请求函数（useEffect不能直接用async，所以内部封装）
    const fetchCabangData = async () => {
      try {
        // 调用你的Laravel API
        const response = await fetch('http://localhost:8000/api/cabangs');
        
        // 处理HTTP状态码错误（fetch仅在网络故障时触发catch，状态码错误需手动判断）
        if (!response.ok) {
          throw new Error(`请求失败，状态码：${response.status}`);
        }

        // 解析JSON格式的响应数据
        const data = await response.json();
        // 更新状态，存储获取到的数据
        setCabangs(data);
      } catch (err) {
        // 捕获并存储错误信息
        setError(err.message);
      } finally {
        // 请求完成（无论成功或失败），关闭加载状态
        setIsLoading(false);
      }
    };

    // 调用请求函数
    fetchCabangData();
    // 空数组依赖项：确保组件挂载时只执行一次请求
  }, []);

  // 根据不同状态渲染对应内容
  if (isLoading) {
    return <div>正在加载数据...</div>;
  }

  if (error) {
    return <div>获取数据出错：{error}</div>;
  }

  // 数据加载成功，渲染指定字段
  return (
    <div style={{ padding: '20px' }}>
      <h2>分支机构信息</h2>
      <div style={{ display: 'grid', gap: '15px', marginTop: '10px' }}>
        {cabangs.map(cabang => (
          <div key={cabang.id} style={{ border: '1px solid #eee', padding: '15px', borderRadius: '8px' }}>
            <h3 style={{ margin: '0 0 8px 0' }}>{cabang.nm_cabang}</h3>
            <p style={{ margin: '0', color: '#666' }}>{cabang.deskripsi}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default CabangList;

关键部分解释 #

1. 状态管理：

   • cabangs：存储从API获取到的分支机构数组
   • isLoading：控制加载状态的显示，提升用户体验
   • error：捕获并展示请求过程中出现的错误

2. API请求逻辑：

   • 在useEffect中封装异步请求函数，确保组件挂载时自动发起请求
   • 用fetch发送GET请求，注意处理HTTP状态码错误（比如404、500）
   • 请求完成后更新状态，触发组件重新渲染

3. 数据渲染：

   • 使用map遍历cabangs数组，每个项用id作为唯一key（React要求列表项必须有唯一key）
   • 只渲染nm_cabang（作为标题）和deskripsi（作为描述）字段

注意事项：跨域问题解决 #

如果你的React项目运行在默认的http://localhost:3000，而Laravel在http://localhost:8000，会出现跨域请求被阻止的问题，需要在Laravel中配置CORS：

• 安装CORS扩展包：composer require fruitcake/laravel-cors
• 打开config/cors.php，修改配置：

  'paths' => ['api/*'],
  'allowed_origins' => ['http://localhost:3000'], // 开发环境也可以设为['*']
  'allowed_methods' => ['*'],
  'allowed_headers' => ['*'],
  

• 打开app/Http/Kernel.php，在api中间件组中添加：

  \Fruitcake\Cors\HandleCors::class,
  

这样就能正常发起跨域请求了。

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