React.js新手求助：如何将API生成的状态传递给组件

嘿，刚接触React是吧？我明白你想把API拿到的数据动态填充到可选列表里的需求，这其实是React里很常见的场景，我给你一步步讲清楚怎么弄～

核心思路 #

你需要先把API返回的数据存在React的*状态（state）*里，然后通过状态来驱动列表的渲染——状态更新时，组件会自动重新渲染，列表内容也就跟着动态变化了。

完整代码示例（函数组件+Hooks，现在React推荐的写法） #

import { useState, useEffect } from 'react';
// 如果你用的是Material-UI的ListItem，记得提前导入哦
import ListItem from '@mui/material/ListItem';

function StudentListComponent() {
  // 1. 初始化状态：存储学生列表和加载状态
  const [siswaList, setSiswaList] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  // 2. 封装数据获取函数
  const getListSiswa = async () => {
    try {
      const response = await fetch('http://localhost/assessment-app/adminpg/api/v1/Siswa/');
      const data = await response.json();
      // 把API返回的posts数据存到状态里
      setSiswaList(data.posts);
    } catch (error) {
      // 别忘了处理请求错误，避免页面崩溃
      console.error('获取学生列表失败:', error);
      // 这里也可以给用户显示错误提示，比如<Alert>组件
    } finally {
      // 不管成功失败，都关闭加载状态
      setIsLoading(false);
    }
  };

  // 3. 组件挂载时触发数据获取
  useEffect(() => {
    getListSiswa();
    // 空依赖数组确保只在组件第一次渲染时执行一次
  }, []);

  // 4. 渲染逻辑：先显示加载，再渲染列表
  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      {/* 用状态里的数据动态生成ListItem */}
      {siswaList.map(itm => (
        <ListItem 
          key={itm.siswa_id} 
          value={itm.siswa_id} 
          primaryText={itm.nama} 
        />
      ))}
    </div>
  );
}

export default StudentListComponent;

关键细节解释 #

• useState：用来存储学生列表和加载状态，状态更新时React会自动重新渲染组件
• useEffect：空依赖数组[]保证数据只在组件挂载时请求一次，避免重复调用API
• async/await：比起你原来的.then写法，代码更直观易读，当然你也可以继续用.then
• key属性：map渲染列表时必须加唯一的key（这里用siswa_id），帮助React高效更新DOM，避免不必要的重渲染
• 错误处理：用try/catch捕获请求中的异常，比如API挂了、网络不通的情况

如果要把数据传给子组件 #

如果你想把这个学生列表传给另一个组件使用，直接把状态作为props传过去就行：

// 父组件里
<StudentDropdown siswaData={siswaList} />

// 子组件StudentDropdown里
function StudentDropdown({ siswaData }) {
  return (
    <select>
      {siswaData.map(itm => (
        <option key={itm.siswa_id} value={itm.siswa_id}>
          {itm.nama}
        </option>
      ))}
    </select>
  );
}

类组件版本（如果你还在使用类组件） #

import React, { Component } from 'react';
import ListItem from '@mui/material/ListItem';

class StudentListComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      siswaList: [],
      isLoading: true
    };
  }

  // 组件挂载时获取数据
  componentDidMount() {
    this.getListSiswa();
  }

  getListSiswa() {
    fetch('http://localhost/assessment-app/adminpg/api/v1/Siswa/')
      .then(response => response.json())
      .then(data => {
        this.setState({ siswaList: data.posts, isLoading: false });
      })
      .catch(error => {
        console.error('获取数据失败:', error);
        this.setState({ isLoading: false });
      });
  }

  render() {
    const { siswaList, isLoading } = this.state;

    if (isLoading) {
      return <div>加载中...</div>;
    }

    return (
      <div>
        {siswaList.map(itm => (
          <ListItem key={itm.siswa_id} value={itm.siswa_id} primaryText={itm.nama} />
        ))}
      </div>
    );
  }
}

export default StudentListComponent;

注意：要确保你的API返回的数据结构确实是data.posts，如果API返回的是其他字段（比如data.data），记得调整对应的取值哦～

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