#14 React.js 加载、刷新数据 - 高阶组件


  • 0

    const loadAndRefresh = url => WrapperComponent => {
      return class NewComponent extends Component {
        constructor() {
          super()
          this.state = {
            content: "数据加载中...",
          }
        }
    
        componentWillMount() {
          this._getData(url)
        }
    
        _getData(url) {
          this.setState({
            content: "数据加载中...",
          })
          getData(url).then(content => {
            this.setState({ content })
          })
        }
    
        handleRefreshAction() {
          this._getData(url)
        }
    
        render() {
          return (
            <div>
              <WrapperComponent
                content={this.state.content}
                refresh={this.handleRefreshAction.bind(this)}
                {...this.props}
              />
            </div>
          )
        }
      }
    }
    
    

  • 0

    @ScriptOJ
    参考答案里面是不是忘记写

    state = {
         content: '数据加载中...'
     }
    


  • 0

    // getData(url) 已经可以直接使用
    // 本站的环境都可以使用 async/await
    
    const loadAndRefresh = (url) => (WrapperComponent) => {
      return class extends Component {
        state = {
          content: '数据加载中...'
        }
        componentDidMount () {
          this.getContent()
        }
        getContent = async () => {
          this.setState({ content:  '数据加载中...' })
          const content = await getData(url)
          this.setState({ content })
        }
        render () {
          const props = {
            refresh: this.getContent,
            content: this.state.content,
            ...this.props,
          }
          return <WrapperComponent {...props} />
        }
        
      }
    }
    
    

  • 0

    // getData(url) 已经可以直接使用
    // 本站的环境都可以使用 async/await
    
    const loadAndRefresh = url => Com => {
      return class extends Component {
        constructor () {
          super();
          this.state = {
            content: ''
          }
        }
        
        refresh () {
          this.setState({
            content: '数据加载中...'
          });
          getData(url)
            .then(content => {
              this.setState({
                content
              });
            })
            .catch(e => {
              // e
            })
        }
        
        componentDidMount () {
          this.refresh();
        }
        
        render () {
          const props = {
            content: this.state.content,
            refresh: this.refresh.bind(this),
            ...this.props
          }
          return <Com {...props} />
        }
      }
    }
    

  • 0

    const loadAndRefresh = url=> Post => {
    class LoadAndRefreshActions extends Component{
    constructor (props) {
    super(props)
    this.state = {
    content: '数据加载中...',
    }
    }

      componentDidMount(){
        this.refresh();
      }
      
      refresh(){
        this.setState({
            content: '数据加载中...'
          })
        getData(url).then((data)=>{
          this.setState({
            content: data
          })
        })
      }
      
      render () {
        return (
          <Post
            content={this.state.content}
            refresh={this.refresh.bind(this)}
            {...this.props} />
        )
      }
    }
    return LoadAndRefreshActions
    

    }


  • 0

    @ScriptOJ 代码写得漂亮,学到了~


  • 0

    这道题同时考察了高阶函数和高阶组件,棒!


  • 0

    // getData(url) 已经可以直接使用
    // 本站的环境都可以使用 async/await
    
    const loadAndRefresh = (url) => {
      return (Component) => {
        return class extends React.Component {
          constructor(props) {
            super(props)
            this.state = {
              content: '数据加载中...'
            }
          }
          componentWillMount() {
            getData(url).then(data => {
              this.setState({
                content: data
              })
            })
          }
          refresh = () => {
            this.setState({
                content: '数据加载中...'
            })
            getData(url).then(data => {
              this.setState({
                content: data
              })
            })
          }
          render() {
            return(
              <Component content={this.state.content} refresh={this.refresh} {...this.props}/>
              )
          }
        }
      }
    }
    

  • 0

    为什么我用本地用
    Post = loadAndRefresh('/post')(Post)
    会报错提示:“无法分配到“Post”,因为它不是变量。ts(2539)”
    希望大佬解释下,,是不是不能重新赋值class


  • 0

    怎么写都报错MMP,检验代码的服务器是不有问题。。。

    // getData(url) 已经可以直接使用
    // 本站的环境都可以使用 async/await
    
    const loadAndRefresh = (url) => (wrappedComponent) => {
      return class extends Component {
        componentWillMount () {
          this._refresh()
        }
        async _refresh () {
          this.setState({ content: '数据加载中...' })
          const content = await getData(url);
          this.setState({ content })
        }
        render () {
          return (
            <wrappedComponent
              content={ this.state.content }
              refresh={ this._refresh.bind(this) }
              { ...this.props }
            />
          )
        }
      }
    }
    
    

登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待