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 文件中的自定义钩子。 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 }

这是第一个代码清单中的小组件 InfoMessages ，如果事件数组为空，则显示消息“无结果”：

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

不要将钩子传递给定制钩子：定制钩子应该与特定组件分离，并且有可能被重用。另外，您的自定义钩子总是返回function Events () { const [events, loadingEvents] = useEvents([]) return loadingEvents ? <EventsSpinner /> : <div>{events.map(e => <Event key={e.id} title={e.title} />}</div> }，这是错误的。但是您的代码很容易修复。

在您的主要组件中，您可以使用自定义钩子获取数据，并获得如下所示的加载状态，例如：

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]
}

在自定义钩子中，您应该返回内部状态。例如：

events

在此示例中，自定义钩子返回数组，因为我们需要两个值，但是您也可以返回带有两个键/值对的对象。或一个简单的变量（例如，loading数组，如果您不想使用const events = useEvents([])状态），则可以这样使用它：

HttpClientModule

使用自定义的React钩子获取数据

1 个答案: