如果 SPFX PNP ListView 被隐藏并再次显示在现代页面上，则无法在页面上加载

Question

我有列表视图，我把它放在渲染部分，页面加载我通过 j 查询将它隐藏在 div 中，当我显示它时没有数据出现在它上面，但是如果我点击开发人员工具开始出现，或者如果我更改屏幕分辨率，它开始出现。这很奇怪。

<ListView
items={this.state.supplierContractItems.slice(this.state.supplierContractRare, this.state.supplierContractFront + 1)}
showFilter={this.state.showFilters}
viewFields={this.state.supplierContractViewFields}
selectionMode={SelectionMode.multiple}
selection={this.getSupplierContractSelection}
filterPlaceHolder="Search..." />

Answer 1

我无法重现你的 issue.I 使用 JS 直接隐藏 div。

我的测试代码：

export default class ReactGetListItemsAddtoSelectTag extends React.Component<IReactGetListItemsAddtoSelectTagProps, any> {
  public constructor(props) {
    super(props);
    this.state = {               
      items:[]
    };
  }
  public render(): React.ReactElement<IReactGetListItemsAddtoSelectTagProps> {
    
    const viewFields: IViewField[] = [{  
      name: "Title",  
      displayName: "Title",  
      isResizable: true,  
      sorting: true,  
      minWidth: 0,  
      maxWidth: 150  
    },  
    {  
      name: "ID",  
      displayName: "ID",  
      isResizable: true,  
      sorting: true,  
      minWidth: 0,  
      maxWidth: 200  
    }];  
    return (
      <div className={ styles.reactGetListItemsAddtoSelectTag }>
        <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(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>                
          </div>
          <div id="test">
          <ListView
  items={this.state.items}
  viewFields={viewFields}
  iconFieldName="ServerRelativeUrl"
  compact={true}
  selectionMode={SelectionMode.multiple}
  selection={this._getSelection}
  showFilter={true}
  
  filterPlaceHolder="Search..."
   />
   </div>
   <input type="button" value="change" onClick={this.handle}/>
        </div>
      </div>
    );
  }

  handle(){
    var div=document.getElementById("test");
    var style=div.getAttribute("style");
    
    if(!style){
    div.setAttribute("style","display:none");
  }else{
    div.removeAttribute("style");
  }
  }
  componentDidMount(){            
    let web = new Web(this.props.context.pageContext.web.absoluteUrl);        
    web.lists.getByTitle("testn").items.top(5).get().then(items=>{
      console.log(items)
      this.setState({items})});
    
  }
  private _getSelection(items: any[]) {
    console.log('Items:', items);
  }
}

我的测试结果：

更新：

componentDidMount() {
    let web = new Web(this.props.context.pageContext.web.absoluteUrl);
    web.lists.getByTitle("testn").items.top(5).get().then(items => {
      console.log(items)
      this.setState({ items })
    });
   
    setTimeout(()=>$("#listView_id").hide(),2000);
   
  }

Answer 2

FIRSTLY THANKS A LOT  TO INVESTIGATE ON THIS, JUST TRY THE BELOW CODE, THIS WILL FIRST HIDE THE LIST VIEW ON PAGE LOAD AND THEN BUTTON IS CLICKED TO SHOW BACK, IT ONLY SHOWS THE SEARCH BUTTON NOT THE RESULT, BUT JUST IF YOU`enter code here` CHANGE THE RESOLUTION OF THE SCREEN BY PRESSING CTRL + Mouse wheel up/down the result will show automatically. 


  export default class Reacttest extends React.Component<IReacttestProps, IHelloWorldState, {}> {

  constructor(props: IReacttestProps) {

    super(props)

    this.state = {
      items: [],
      selecteduser: []
    };

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

    this.handle = this.handle.bind(this);
  }





  public render(): React.ReactElement<IReacttestProps> {
const viewFields: IViewField[] = [{
      name: "Title",
      displayName: "Title",
      isResizable: true,
      sorting: true,
      minWidth: 0,
      maxWidth: 150
    },
    {
      name: "ID",
      displayName: "ID",
      isResizable: true,
      sorting: true,
      minWidth: 0,
      maxWidth: 200
    }];
    return (
      <div >
        <span id="listView_id">
          <ListView
            items={this.state.items}
            viewFields={viewFields}
            iconFieldName="ServerRelativeUrl"
            compact={true}
            selectionMode={SelectionMode.multiple}
            selection={this._getSelection}
            showFilter={true}
            filterPlaceHolder="Search..."
          />
        </span>
        <span>  <input type="button" value="Click To Show" onClick={this.handle} /></span>
      </div>
    );
  }
  componentDidMount() {
    sp.web.lists.getByTitle("People").items.top(5).get().then(items => {
      console.log(items)
      this.setState({ items })
    });
    $("#listView_id").hide();
  }
  private handle() {
    $("#listView_id").show();
  }
  private _getSelection(items: any[]) {
    console.log('Items:', items);
  }
}

如果 SPFX PNP ListView 被隐藏并再次显示在现代页面上，则无法在页面上加载

SPFX PNP ListView fails to load on page if it is hided and showed back again on the Modern page

sharepoint

sharepoint-online

spfx