SharePoint与React：Web Part表格无法渲染SharePoint列表数据

数据老陈

2026-5-15

SharePoint List Data Not Rendering in React Bootstrap Table (SPFx Web Part)

我看了你的代码，核心问题出在异步请求的时机管理和组件状态的正确使用上，这也是SPFx开发里很常见的新手坑。你现在的写法有几个关键错误，导致SharePoint返回的数据没法渲染到表格里：

你在render方法里发起了SPHttpClient请求，但render是纯函数，不应该包含异步副作用（比如API请求）。而且render执行时请求还没返回，表格一开始拿到的是空的ritems，之后请求完成了也不会触发组件重新渲染。
你把请求到的数据存在了局部变量（fitems、dataArray、nameArray）里，而不是组件的state中。React类组件只有当state或props更新时才会重新渲染，局部变量的变化不会触发任何更新，所以表格永远拿不到最新的数据。
最后你把转换后的数据放到了nameArray，但表格绑定的是ritems，两者完全没关联，这也是一个明显的疏漏。

修复步骤

1. 给组件添加状态管理

首先在组件类里定义状态接口，用来存储表格数据和加载状态：

// 定义组件状态接口
interface IAZState {
  tableData: Array<{
    id: number;
    title: string;
    location: string;
  }>;
  isLoading: boolean;
}

// 在组件构造函数里初始化状态
export default class AZ extends React.Component<IAZProps, IAZState> {
  constructor(props: IAZProps) {
    super(props);
    this.state = {
      tableData: [],
      isLoading: true
    };
  }
  // ... 其他方法
}

2. 把API请求移到生命周期方法里

把数据请求放到componentDidMount里，这个方法会在组件挂载完成后执行一次，适合发起异步请求：

componentDidMount(): void {
  this.fetchCourseData();
}

// 封装请求方法
private fetchCourseData = () => {
  this.props.spHttpClient.get(
    `${this.props.siteUrl}/sites/dev-site/_api/web/lists/GetByTitle('CourseBookingTest')/items`,
    SPHttpClient.configurations.v1,
    {
      headers: {
        'Accept': 'application/json;odata=nometadata',
        'odata-version': ''
      }
    }
  )
  .then((response: SPHttpClientResponse) => response.json())
  .then((response: { value: IListItem[] }) => {
    // 转换SharePoint数据为表格需要的格式
    const formattedData = response.value.map(item => ({
      id: item.Id,
      title: item.Location, // 按你原来的逻辑用Location作为Product Name
      location: item.Location // 对应表格的Product Price列
    }));
    // 更新状态，触发组件重新渲染
    this.setState({
      tableData: formattedData,
      isLoading: false
    });
  })
  .catch((error: any) => {
    alert(`Loading items failed: ${error}`);
    this.setState({ isLoading: false });
  });
}

3. 在render里使用状态数据

修改render方法，使用state里的tableData作为表格数据源，同时处理加载状态：

public render(): React.ReactElement<IAZProps> {
  const { tableData, isLoading } = this.state;

  // 加载中显示提示
  if (isLoading) {
    return <div className="container">Loading course data...</div>;
  }

  return (
    <div className="container">
      <div>
        <h6>Location Search</h6>
        <div>
          <BootstrapTable 
            data={tableData} 
            selectRow={selectRowProp} 
            striped 
            hover 
            condensed 
            pagination 
            insertRow 
            deleteRow 
            search
          >
            <TableHeaderColumn dataField="id" isKey dataAlign="right" dataSort>Product ID</TableHeaderColumn>
            <TableHeaderColumn dataField="title" dataSort>Product Name</TableHeaderColumn>
            <TableHeaderColumn dataField="location" dataAlign="center">Product Price</TableHeaderColumn>
          </BootstrapTable>
        </div>
      </div>
      Component 2
      <PanelB 
        count={10} 
        key={null} 
        onChange="" 
        index={null} 
        id={null} 
        onRemove 
        details="" 
        description={this.props.description} 
        text="" 
        title="" 
        category={this.props.category} 
        image={this.props.image}
      >
        Hello World I am component 2
      </PanelB>
    </div>
  );
}

为什么这样能解决问题？

状态驱动渲染：把数据放到state里，当调用setState更新数据时，React会自动触发组件重新渲染，表格就能拿到最新的SharePoint数据。
正确的请求时机：componentDidMount确保请求只在组件挂载后执行一次，不会重复发起请求，也不会干扰render的同步执行。
数据关联正确：转换后的formattedData直接赋值给tableData，表格绑定的就是这个状态变量，数据能正确传递到表格组件。

额外注意事项

确保你的IListItem接口正确定义了Id和Location字段，避免类型错误：

interface IListItem {
  Id: number;
  Location: string;
  // 其他你需要的字段
}

如果你的列表里Product Name对应的不是Location字段，记得调整formattedData里的title值（比如改成item.Title）。
建议把加载提示做得更友好，比如用SPFx自带的Spinner组件，提升用户体验。

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