useEffect redux state 改变了，但是数据没有显示

Question

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

当我使用这个语句时，它给出错误 employee[0] is undefined。 const { id, empno, firstname } = employee[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));
      });
  };
};

Answer 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>
    </>
  );
};

useEffect redux state 改变了，但是数据没有显示

useEffect redux state changed, but data not displayed

reactjs

redux

use-effect