Question

如果我们要从远程服务器获取数据，然后将其作为初始状态传递给reducer，我们如何进行？我试图在useEffect内调用调度，但由于禁止在useEffect（...）内调用钩子的规则而被拒绝了，

有帮助吗？

Answer 1

将数据作为初始状态传递给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
}

。

反应新的HOOKS api，使用带有动态initialState的useReducer

1 个答案: