我真的觉得我在这里错过了一些明显的东西。我只是在玩/学习react query..我有下面的代码:
import {useReducer} from 'react'
import AppContext from './context'
import reducer from './reducer'
import apiClient from './http-commom'
import {useQuery} from 'react-query'
function App() {
const getClientList = useQuery(
['client-list'],
async ({signal}) => {
return await apiClient.post('/v1/clientlist', {signal})
},
{enabled: true, refetchOnWindowFocus: false}
)
let clientList = getClientList?.data?.data?.recordset
const initalState = {
clientList: clientList,
}
const [state, dispatch] = useReducer(reducer, initalState)
console.log(clientList) // works ['client1','client2','client3']
console.log(initalState.clientList) // works ['client1','client2','client3']
console.log(state.clientList) // undefined
return (
<AppContext.Provider value={{state, dispatch}}>
<div>testing</div>
</AppContext.Provider>
)
}
export default App
为什么状态值显示为undefined,而其他两个正常工作?
我试图像这样将state.clientList拉到另一个组件中……但是将控制台日志移动到App组件中,这样我就可以比较所有
function MenuBar() {
const {state,dispatch} = useContext(AppContext)
const {clientList} = state
console.log(state.clientList) // undefined...
...
任何帮助都非常感谢!也许我只需要去散步,直到它来找我:)
谢谢
1条答案
按热度按时间um6iljoc1#
useReducer的初始状态只在第一个渲染周期进行评估。但是在第一个渲染周期中,从
useQuery
返回的data
仍然是undefined
,因为它的异步状态-它需要首先被获取。当数据在一段时间后进入时,对
initialState
的更新不会传递给reducer,因为这就是“初始”状态的工作方式。因此,您可以编写一个
useEffect
来调度一个更新状态的操作,但这是一个反模式。为什么你需要从react-query复制状态到其他地方?react-query是一个状态管理器,它应该是你的服务器状态的唯一真实来源。