无法使用 useEffect 和 React Redux 映射数组

Question

在 useEffect 获取数组并将其分派到我的 redux 状态后，我正在尝试映射员工列表。如果我控制台记录它，我会看到一个充满对象的数组，但我的组件似乎没有重新渲染。有什么建议吗？

import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { setEmployees } from '../redux/reducers/employeeListReducer'
import employeesService  from '../back-end/services/employees'

const EmployeeList = ({  }) => {
  const dispatch = useDispatch()
  const employees = useSelector(state => state.employeeList) 
  const user = useSelector(state => state.user)

  employeesService.setToken(user.token)

  useEffect(() => {
    (async () => {
    const employeeList = await employeesService.getAll()
         dispatch(setEmployees(employeeList))
     })();
  
  }, [dispatch])
  
  if (employees === null) {
    return <p>Loading Employees...</p>
  }
  return (
    <div>
      {console.log(employees)}
       {employees.map(e =>
        <div key={e.id}>
          {e.name} {e.phone} {e.email}
        </div>  
      )} 
    </div>
  )
}

export default EmployeeList

Answer 1

从描述中不清楚可能导致您描述的第一个问题的原因（没有console.log 我们可以查看以确定为什么存在差异），但是您不能从提供给其他钩子的回调中调用钩子.这是挂钩如何实现的限制。它们依赖于总是以相同的顺序被调用（所以你不能有条件地调用钩子函数），并且它们必须在你的函数返回时都被调用。详细信息可以在这里找到：

https://reactjs.org/warnings/invalid-hook-call-warning.html

基本上，您必须在功能组件的顶层或另一个挂钩的顶层调用挂钩函数（例如，您会看到使用其他挂钩实现的挂钩）。在您的函数返回时，必须调用所有钩子函数。如果在回调中调用钩子，它很可能会在您的函数返回后 被调用。所以 React 会警告你。

综上所述，将 dispatch 的声明移至组件的顶层应该可以解决此问题：

import React, {useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { setEmployees} from '../redux/reducers/employeeListReducer'
import employeesService  from '../back-end/services/employees'


const EmployeeList = ({ employee }) => {
  const dispatch = useDispatch()
  const employees = useSelector(state => state.employeeList) 
  const user = useSelector(state => state.user)
  employeesService.setToken(user.token)

  useEffect(() => {
    employeesService
      .getAll()
      .then(employeeList => {
         dispatch(setEmployees(employeeList))
      })
  }, [dispatch])

  return (
    <div>
      Employee List Placeholder
       {employees.map(e =>
        <div key={e.id}>
          {e.name} {e.phone} {e.email}
        </div>  
      )} 
    </div>
  )
}

export default EmployeeList