Question

我在多个页面上使用了获取请求，并且希望将其转换为一个组件，以便在需要时直接进行调用。事实证明，这比我想象的要难，并且提出了许多问题。

我已经尝试过使用wrappedComponent函数，但是由于它仍然无法使用，因此不确定是否是解决方案。现在说fetchPosts类构造函数不能在没有new的情况下调用。

        const that = this; 
        fetch ('/testrouter')
        .then (response => {
            return response.json(); 
        }).then(jsonData => {
            that.setState({posts:jsonData})
        }).catch(err => {
            console.log('Error fetch posts data '+err)
        });
    }

这就是我想变成一个组件的原因，这样我就可以从componentDidMount中的另一个组件以它的名字来调用它。我尝试这样做：

function fetchPosts(WrappedComponent) {
    class FetchPosts extends Component {
     constructor(props) {
         super(props)
         this.state = {
             posts: []
         }
     }

     fetchAllPosts() {
         const that = this; 
        fetch ('/testrouter')
        .then (response => {
            return response.json(); 
        }).then(jsonData => {
            that.setState({posts:jsonData})
        }).catch(err => {
            console.log('Error fetch posts data '+err)
        });
    }
    render() {
        return (<WrappedComponent 
        fetchAllPosts = {this.fetchAllPosts})
        />);
    }

}
    return FetchPosts;

}


export default fetchPosts

然后导入它，并使用fetchPosts调用它，但是它不起作用。

我希望能够创建一个组件，添加代码然后导入该组件，但这不起作用。

Answer 1

您可能想要创建一个自定义钩子来完成此操作：

useFetch.jsx

import React, { useState, useEffect } from 'react'

const useFetch = (url) =>
  const [state, setState] = useState({ loading: true, data: null, error: null })

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => setState(state => ({ ...state, loading: false, data }))
      .catch(error => setState(state => ({ ...state, loading: false, error }))
  },[])

  return state
}

export default useFetch

MyComponent.jsx

import React from 'react'
import useFetch from './useFetch.jsx'

const MyComponent = () => {
  const data = useFetch('/testrouter')

  return (<>
    { data.loading && "Loading..." }
    { data.error && `There was an error during the fetch: {error.message}` }
    { data.data && <Posts posts={data.data}/> }
  </>)
}

如何将许多组件中使用的功能转换为可以在应用程序中重复使用的组件？

1 个答案: