Question

我正在学习做出反应，到目前为止我已经掌握了

import * as React from 'react';
import styles from './MainArticles.module.scss';
import { IMainArticlesProps } from './IMainArticlesProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { sp } from "@pnp/sp/presets/all";

//export default class MainArticles extends React.Component<IMainArticlesProps, {}> {
export const MainArticles: React.FC<IMainArticlesProps> = (props: IMainArticlesProps) => {

    const [data, setData] = React.useState([]);

    sp.setup({
      spfxContext: props.context
    });

    sp.web.lists.getByTitle("Main Articles").items.select('Title').get().then(result => {
      for (var k in result) {
        console.log(result[k].Title);
        setData(data => [...data, result[k].Title]);
      }
      console.log(result);
      return result;
    });


    return (
      <div className={ styles.mainArticles }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );

};

问题是我正在调用api调用来下载数据，但它陷入无限循环并继续下载。我认为是因为每次更改钩子都会重新渲染。

我认为解决方法是将api下载代码移到导入此代码的父文件中。但是问题是，如果我导入了它，如何访问该钩子并使用setData调用？

父代码看起来像这样

import { MainArticles } from './components/MainArticles';
import { IMainArticlesProps } from './components/IMainArticlesProps';

export default class MainArticlesWebPart extends BaseClientSideWebPart<IMainArticlesWebPartProps> {
  public render(): void {
    const element: React.ReactElement<IMainArticlesProps> = React.createElement(
      MainArticles,
      {
        description: this.properties.description,
        list_title: this.properties.list_title,
        site_url: this.properties.site_url,
        context:this.context
      }
    );
    
    
}
    ReactDom.render(element, this.domElement);
  }

Answer 1

检查效果挂钩，以防止触发初始化代码在每个渲染周期上重新运行。

https://reactjs.org/docs/hooks-effect.html

此修复程序应如下所示：

import * as React from 'react';
import styles from './MainArticles.module.scss';
import { IMainArticlesProps } from './IMainArticlesProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { sp } from "@pnp/sp/presets/all";


export const MainArticles: React.FC<IMainArticlesProps> = (props: IMainArticlesProps) => {
    const [data, setData] = React.useState([]);

    React.useEffect(() => {
        sp.setup({
          spfxContext: props.context
        });

        sp.web.lists.getByTitle("Main Articles").items.select('Title').get().then(result => {
          let dataCache = [];
          for (var k in result) {
            console.log(result[k].Title);
            dataCache.push(result[k].Title);
          }
          setData(dataCache);
          console.log(result);
          return result;
        });
    }, []);

    return (
      <div className={ styles.mainArticles }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
};

如何更新另一个文件的React钩子？

1 个答案: