当使用HOC加载程序时重新呈现问题

我正在构建一个应用程序，其中有大量页面，每个页面需要加载程序图标以显示数据何时从服务器传出，但尚未到达，但如果有内容根本没有数据。我可以在没有使用高阶组件（HOC）的情况下显示它，但是在每个组件中这样做是很乏味的。我希望加载器代码可以重用，这样我就可以在需要的任何组件中使用它。但我面临这个问题。当使用HOC加载程序时重新呈现问题

如果有数据，则没有问题。如果根本没有数据，则加载器保持加载和加载，而不应显示任何内容。

我不得不使用if (!this.props.size)内componentDidMount获取数据，因为如果我不这样做，该组件将不断重新渲染，如果我这样做，该组件将不会重新渲染，如果有数据，但如果根本没有数据，组件会通过加载图标连续重新渲染。

下面是代码

class Logs extends React.PureComponent { 
    constructor(props) { 
    super(props); 
    this.state = { 
     show: false, 
    }; 
    } 
    componentDidMount() { 
    // this.props.requestLogs(); 
    if (!this.props.logs.size) { 
     this.props.requestLogs(); 
    } 
    } 

    //componentWillUnmount() { 
    //document.body.removeEventListener("", this.props.requestLogs()); 
    //} 


    renderLogs() { 
    const { logs } = this.props; 
    return logs.size > 0 
     ? logs.valueSeq().map(log => { 
      return (
      <div className="card" key={log.get("_id")}> 
       <li className="row"> 
       <div className="col-md-6"> 
        <a 
        onClick={() => 
         this.handleDialog(log.get("_id"), log.get("error_stack"))} 
        > 
        {log.get("error_message")} 
        </a> 
       </div> 
       <div className="col-md-6 text-right"> 
        <a 
        className="text-danger" 
        onClick={() => this.handleDelete(log.get("_id"))} 
        > 
        Delete 
        </a> 
       </div> 
       </li> 
      </div> 
     ); 
     }) 
     : <p>No Content</p>; 
    } 
    render() { 
    const { logs, isRequesting } = this.props; 
    return (
     <div className="container"> 
     <div className="row mg-btm-md"> 
      <div className="col-xs-6"> <h1>Logs</h1></div> 
     </div> 
     <ul className="list-group"> 
      {this.renderLogs()} 
      {this.state.show ? this.props.dialog : null} 
     </ul> 
     </div> 
    ); 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(
    Loader("isRequesting")(Logs) 
); 


const Loader = prop => WrappedComponent => { 
    return class Loader extends React.PureComponent { 
    render() { 
     return this.props[prop] 
     ? <div className="earth-spinning"> 
      <img 
       src={EarthSpinning} 
       alt="spinner" 
       style={{ margin: "0 auto" }} 
      /> 
      </div> 
     : <WrappedComponent {...this.props} />; 
    } 
    }; 
}; 

export default Loader;

完整的代码是在这里https://gist.github.com/SanskarSans/b30c085ffacf01c58b66f128096746cc

来源

2017-07-04 Serenity

显示 “mapStateToProps” 功能，我不能看到你的 “isRequesting” 变量... –

我不知道你为什么作出这样的复杂性这样的组件。首先简化你的代码。 –

你能给我一个想法，我应该在哪里改进？ – Serenity

我做了一件超级简单，而且肯定是存在的地方改善。但它解决了你想要的问题，如果你有一个“loadedData”标志显示数据，如果没有，你显示一个加载器。

链接代码： https://codepen.io/tzookb/pen/VWdeyE

代码：

class SomeComponent extends React.Component { 
    render() { 
    return <div>Im a basic component</div>; 
    } 
} 

function withLoader(WrappedComponent) { 
    return class extends React.Component { 
    render() { 
     if (this.props.loadedData) { 
     return <WrappedComponent {...this.props} />;   
     } else { 
     return <h1>Loading...</h1>; 
     } 
    } 
    }; 
} 

let SomeComponentWithLoader = withLoader(SomeComponent); 


ReactDOM.render(<SomeComponentWithLoader loadedData={false} />, document.getElementById("app"));

来源

2017-07-04 18:40:12

当使用HOC加载程序时重新呈现问题

回答

相关问题