如果我们想从远程服务器获取数据,然后将其作为初始状态传递给 reducer,我们该如何进行?我试图在 useEffect 中调用调度,但根据在 useEffect(...) 中调用钩子(Hook)的规则被禁止 ,
有什么帮助吗?
最佳答案
将数据作为初始状态传递给 reducer 的唯一方法是在渲染组件之前获取数据。您可以在父级中执行此操作:
const Parent = () => {
const [data, setData] = useState(null)
useEffect(() => {
apiCall().then(response => {
setData(response.data)
})
}, [])
if (!data) return null
return <MyComponent data={data} />
}
const MyComponent = ({ data }) => {
const [state, dispatch] = useReducer(reducer, data)
... // utilize state
}
.
上述方法是不可取的,因为它破坏了关注点分离。通常最好设置一个空初始状态并调用 dispatch
将其更改为所需状态:
const MyComponent () => {
const [state, dispatch] = useReducer(reducer, null)
useEffect(() => {
apiCall().then(response => {
dispatch({
type: 'INITIALIZE',
data: response.data
})
})
}, [])
if (!state) return null
... // utilize state
}
.
关于reactjs - react 新的 HOOKS api,使用动态 initialState 的 useReducer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54930278/