不要将钩子传递给自定义钩子：自定义钩子应该与特定组件解耦，并可能被重用。此外，您的自定义挂钩总是返回
我是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，如果事件数组为空，它将显示消息"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中，所以当它显示时，它看起来是这样的：记录是否显示事件，以及应用程序本身
如果没有显示，它看起来是这样的：如果没有显示事件，则记录日志，应用程序本身
我必须注意，来自服务器的数据在这两种情况下都是完美加载的，所以我完全不知道为什么它在相同的代码中表现不同。我错过了什么？
null，这是错误的。但是你的代码很容易修复。
在您的主要组件中，您可以使用自定义挂钩获取数据，也可以获得这样的加载状态，例如：
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]
}
在本例中，自定义钩子返回一个数组，因为我们需要两个值，但您也可以返回一个具有两个键/值对的对象。或者一个简单的变量(例如，如果您不想要loading状态，则仅使用events数组(，然后这样使用它：
const events = useEvents([])
这是您可以使用的另一个示例，创建一个自定义钩子来执行获取信息的任务
export const useFetch = (_url) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(true);
useEffect(function() {
setLoading('procesando...');
setData(null);
setError(null);
const source = axios.CancelToken.source();
setTimeout( () => {
axios.get( _url,{cancelToken: source.token})
.then(
(res) => {
setLoading(false);
console.log(res.data);
//setData(res);
res.data && setData(res.data);
// res.content && setData(res.content);
})
.catch(err =>{
setLoading(false);
setError('si un error ocurre...');
})
},1000)
return ()=>{
source.cancel();
}
}, [_url])