useEffect redux 状态已更改，但未显示数据答案

【问题标题】：useEffect redux state changed, but data not displayeduseEffect redux 状态已更改，但未显示数据
【发布时间】：2021-04-03 21:49:30
【问题描述】：

我正在使用以下代码来获取页面上更新的 redux 状态数据。 Redux 状态会更新，数据也会打印在控制台上。但是数据并没有呈现在页面上。

当我使用这个语句时，它给出了错误employee[0] is undefined。 const { id, empno, firstname } = 雇员[0];

const EmployeeDetails = ({match}) => {
  const dispatch = useDispatch();

  const employee = useSelector(state => state.employee.data);
  useEffect(() => {
    let employeeobj = { id: parseInt(match.params.id, 10) };
    dispatch(singleEmployee(employeeobj));
  }, [match.params.id, dispatch]);

     const { id, empno, firstname } = employee[0];

  return (
    <>
    <h2> Employee Id: {id}</h2>
    </>);
};

EmployeeDetails.propTypes = {
  match: propTypes.object};

export default EmployeeDetails;

const singleEmployee = (empobj) => {
  return dispatch => {
    dispatch(singleEmployeeBegin());
    axios
      .post(config.APIURL.employee.displaydetail, empobj)
      .then(response => {
        const employee = response.data;
        dispatch(singleEmployeeSuccess(employee));
      })
      .catch(error => {
        dispatch(singleEmployeeFailure(error.message));
      });
  };
};

【问题讨论】：

如果您查看 redux 开发工具并查看调度了哪些操作以及它们对状态进行了哪些更改，这会有所帮助。您还可以在设置员工之前记录员工。 singleEmployee 操作不仅是异步的，而且调度它的效果会在第一次渲染之后运行。
添加可重现问题的代码和框链接也会有所帮助。
Redux 状态已更新。在控制台上，它显示数据。但没有在页面上显示数据。

标签： reactjs redux use-effect

【解决方案1】：

尝试记录员工数据以查看其中的内容并将您的代码更改为此，这样您就不会收到错误：


const EmployeeDetails = ({ match }) => {
  const dispatch = useDispatch();
  const employee = useSelector((state) => state.employee.data);

  useEffect(() => {
    let employeeobj = { id: parseInt(match.params.id, 10) };
    dispatch(singleEmployee(employeeobj));
    // you don't need dispatch in your dependency array because it won't be change
  }, [match.params.id]);

  // just check for employee[0] and if it's not exist you won't get an error
  const { id, empno, firstname } = employee.length ? employee[0] : {};

  return (
    <>
      <h2> Employee Id: {id}</h2>
    </>
  );
};

【讨论】：

谢谢。该代码有效。你能帮我加密URL中的“id”并在页面中解密吗？