javascript - 使用自定义 React hook 获取数据

Question

我是 React 新手，但我正在开发一个应用程序，当用户打开应用程序时，它会从服务器加载一些数据。 App.js 呈现此 AllEvents.js 组件:

const AllEvents = function ({ id, go, fetchedUser }) {
    const [popout, setPopout] = useState(<ScreenSpinner className="preloader" size="large" />)
    const [events, setEvents] = useState([])
    const [searchQuery, setSearchQuery] = useState('')
    const [pageNumber, setPageNumber] = useState(1)

    useEvents(setEvents, setPopout) // get events on the main page

    useSearchedEvents(setEvents, setPopout, searchQuery, pageNumber)

    // for ajax pagination
    const handleSearch = (searchQuery) => {
        setSearchQuery(searchQuery)
        setPageNumber(1)
    }

    return(
        <Panel id={id}>
            <PanelHeader>Events around you</PanelHeader>
            <FixedLayout vertical="top">
                <Search onChange={handleSearch} />
            </FixedLayout>
            {popout}
            {
                <List id="event-list">
                    {
                        events.length > 0
                    ?
                        events.map((event, i) => <EventListItem key={event.id} id={event.id} title={event.title} />)
                    :
                        <InfoMessages type="no-events" />
                    }
                </List>
            }
        </Panel>
    )
}

export default AllEvents

useEvents() 是 EventServerHooks.js 文件中的自定义 Hook 。 EventServerHooks 旨在封装不同的ajax请求。 (就像一个使 AllEvents.js 更干净的帮助文件)这里是:

function useEvents(setEvents, setPopout) {
    useEffect(() => {
        axios.get("https://server.ru/events")
            .then(
                (response) => {
                    console.log(response)
                    console.log(new Date())
                    setEvents(response.data.data)
                    setPopout(null)
                },
                (error) => {
                    console.log('Error while getting events: ' + error)
                }
            )
    }, [])

    return null
}

function useSearchedEvents(setEvents, setPopout, searchQuery, pageNumber) {
    useEffect(() => {
        setPopout(<ScreenSpinner className="preloader" size="large" />)
        let cancel
        axios({
            method: 'GET',
            url: "https://server.ru/events",
            params: {q: searchQuery, page: pageNumber},
            cancelToken: new axios.CancelToken(c => cancel = c)
        }).then(
            (response) => {
                setEvents(response.data)
                setPopout(null)
            },
            (error) => {
                console.log('Error while getting events: ' + error)
            }
        ).catch(
            e => {
                if (axios.isCancel(e)) return
            }
        )

        return () => cancel()
    }, [searchQuery, pageNumber])

    return null
}

export { useEvents, useSearchedEvents }

这是第一个代码 list 中的小组件 InfoMessages，如果事件数组为空，它会显示消息“No results”:

const InfoMessages = props => {
    switch (props.type) {
        case 'no-events':
            {console.log(new Date())}
            return <Div className="no-events">No results :(</Div>
        default:
            return ''
    }
}

export default InfoMessages

所以我的问题是事件会定期加载，而在应用程序打开后会定期不加载。正如您在代码中看到的，我将控制台日志放入 useEvents() 和 InfoMessages 中，所以当它显示时，它看起来像这样: logs if events are displayed ，和 the app itself

如果没有显示，它看起来像这样:logs if events are not displayed ，和 the app itself

我必须注意，在这两种情况下，来自服务器的数据都被完美加载，所以我完全不知道为什么它在相同的代码下表现不同。我错过了什么？

Answer 1

不要将钩子(Hook)传递给自定义钩子(Hook):自定义钩子(Hook)应该与特定组件分离并可能重用。此外，您的自定义 Hook 始终返回 null，这是错误的。但你的代码很容易修复。

在您的主组件中，您可以使用自定义 Hook 获取数据，并获取加载状态，例如:

function Events () {
  const [events, loadingEvents] = useEvents([])

  return loadingEvents ? <EventsSpinner /> : <div>{events.map(e => <Event key={e.id} title={e.title} />}</div>
}

在您的自定义 Hook 中，您应该返回内部状态。例如:

function useEvents(initialState) {
  const [events, setEvents] = useState(initialState)
  const [loading, setLoading] = useState(true)

  useEffect(function() {
    axios.get("https://server.ru/events")
            .then(
                (res) => {
                    setEvents(res.data)
                    setLoading(false)
                }
            )
  }, [])

  return [events, loading]
}

在此示例中，自定义 Hook 返回一个数组，因为我们需要两个值，但您也可以返回一个具有两个键/值对的对象。或者一个简单的变量(例如只有 events 数组，如果您不想要 loading 状态)，然后像这样使用它:

const events = useEvents([])