React中调用setState后在.then()方法结束时丢失ISPList状态值问题求助

Hey there! Let's break down why your ISPLists state is seeming to "disappear" after your .then() calls—there are a few key async-related issues in your code that are causing this behavior. Let's go through them one by one, then fix the code together.

核心问题解析 #

1. Array.map + async 未正确等待异步操作完成 #

When you use async inside Array.map, the map returns an array of Promises instead of the actual data. Right now, your code doesn't wait for all these Promises (the SP API calls) to resolve before moving on to code like console.log(this.state.ISPLists.map(...))—so that code runs before any of your API responses come back and update the state.

2. React setState 是异步的 #

You can't immediately read this.state right after calling setState—React batches state updates and doesn't update the state synchronously. So lines like console.log(this.state.ISPLists[1].title) right after setState will always log the old state, not the new one.

3. TaskLists 变量的作用域与累积问题 #

It looks like TaskLists is a variable defined outside your map loop (you don't show its declaration here, but that's the implication). This can lead to race conditions or unexpected data accumulation, especially when dealing with multiple async requests.

修复后的代码示例 #

Here's how to rewrite your _getListOfLists method to fix all these issues:

export default class Cartable extends React.Component<IMainCartableProps, ICartableState> {
  constructor(props: IMainCartableProps, state: ICartableState) {
    super(props);
    this.state = {
      status: "Ready",
      ISiteCollections: [],
      ISPLists: [],
      ISPTaskItems: [],
    };
  }

  public async _getListOfLists(context: WebPartContext): Promise<void> {
    // 收集所有异步请求到数组中
    const listPromises = this.state.ISiteCollections.map(async (siteCollection: any) => {
      const url = `${siteCollection.SPSiteUrl}/forms/_api/web/lists?$filter=Hidden eq false and BaseTemplate eq 107`;
      const config: SPHttpClientConfiguration = new SPHttpClientConfiguration({
        defaultODataVersion: ODataVersion.v3,
      });

      const response = await this.props.context.spHttpClient.get(url, config, {
        headers: {
          Accept: "application/json;odata=minimalmetadata;charset=utf-8",
        },
      });

      if (response.status === 200) {
        const results = await response.json();
        // 返回当前站点集合的解析后的列表项
        return results.value.map((result: any) => ({
          title: result.Title,
          Id: result.Id,
        }));
      }
      return []; // 请求失败时返回空数组
    });

    // 等待所有API请求完成
    const allLists = await Promise.all(listPromises);
    // 将多维数组扁平化为单一列表数组
    const combinedLists = allLists.flat();

    // 用收集到的所有列表更新状态
    this.setState({ ISPLists: combinedLists }, () => {
      // 使用setState的回调访问更新后的状态
      console.log("Updated ISPLists:", this.state.ISPLists);
      // 如果需要，可以在这里调用_getTaskItems，因为状态已经更新完成
      // this._getTaskItems();
    });
  }
}

关键修复点说明 #

• 用async/await替代.then()链：让异步代码更易读、更易理解，避免嵌套回调的混乱。
• Promise.all等待所有请求：确保我们在所有站点集合的API请求完成并返回数据后才更新状态。
• 扁平化结果数组：因为每个API调用返回的是列表数组，用flat()把它们合并成一个单一数组存入状态。
• setState回调函数：使用setState的可选第二个参数来运行需要访问已更新状态的代码——这能保证你操作的是最新的状态值。

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