javascript - useEffect 有时会给出 null 错误，因为 "error"变量来自 redux 的更改

Question

我有一个表单提交页面，我使用一个 useEffect 钩子(Hook)来更改 Redux 中的错误，因此当错误从后端返回并填充 reducer 时，它会在 useSelector 的帮助下刷新错误变量，这样我就可以在我使用的 DOM 中显示错误消息 Material 用户界面

const BugForm = props => {
  const { classes } = props;
  let error = { image: "", title: "", description: "" };
  let modalState = useSelector(state => state.bug.modal);
  error = useSelector(state => state.UI.errors);

  const initialFormState = {
    category: "",
    project: "",
    priority: "",
    viewStatus: "",
    resolution: "",
    reproducibility: "",
    title: "",
    description: "",
    image: ""
  };
  const dispatch = useDispatch();
  const [value, setValue] = useState({ initialFormState });
  const [openErrorSnack, setOpenErrorSnack] = useState(false);

  // this is for the useEffect to just fire one time in the load:
  const firstUpdate = useRef(true); 


 useEffect(() => {
    if (firstUpdate .current) {
      firstUpdate .current = false;
      return;
    }
    setOpenErrorSnack(true);
    error.image = "";
  }, [error.image || ""]);

//for updating the form values:
const updateField = e => {  
    setValue({
      ...value,
      [e.target.name]: e.target.value
    });
  };

当我提交表单时出现错误，有时在我第一次加载页面时会发生这种情况，有时不会:

TypeError: Cannot read property 'image' of null
BugForm
C:/Users/2C/Desktop/reactjs/ticketApp/client/src/components/bugForm.js:116
  113 |    }
  114 |    setOpenSnack(true);
  115 |    error.image = "";
> 116 |  }, [error.image || ""]);
      | ^  117 | 
  118 |  const updateField = e => {
  119 |    setValue({

这是后期操作:

export const postBug = newBug => dispatch => {
  console.log(newBug);
  dispatch({ type: LOADING_UI });
  checkTokenExpire();
  let bodyFormData = new FormData();
  Object.keys(newBug).forEach(key => bodyFormData.append(key, newBug[key]));
  axios({
    method: "post",
    url: "http://localhost:5000/api/bugs/",
    data: bodyFormData,
    headers: { "Content-Type": "multipart/form-data" }
  })
    .then(res => {
      dispatch({
        type: POST_BUG,
        payload: res.data
      });
      dispatch(clearErrors());
      dispatch({ type: CHANGE_MODAL });
    })
    .catch(err => {
      dispatch({
        type: SET_ERRORS,
        payload: err.response.data ? err.response.data : err.response
      });
    });
};

和 UI 错误缩减器:

const initialState = {
  loading: false,
  errors: {  },
  modal: false
};

export default function(state = initialState, action) {
  switch (action.type) {
    case SET_ERRORS:
      return {
        ...state,
        loading: false,
        errors: action.payload
      };
    case CLEAR_ERRORS:
      return {
        ...state,
        loading: false,
        errors: null
      };
    case CHANGE_MODAL:
      return {
        ...state,
        modal: true
      };
    default:
      return state;
  }
}

如何解决这个问题？在这种情况下有没有正确且安全的方法来使用 useEffect？

Answer 1

当您清除错误时，在reducer上，您将error设置为null，以便useSelector将null返回给变量error，从而返回错误。

我认为你可以选择一些替代方案:

• 在清除期间，您可以将错误设置为 {} 而不是 null
• useEffect 的依赖项中可能有错误(而不是 error.image)，因此在 useEffect 中您必须检查 error 是否为 null

此外，我认为用 let 来 sel 错误是没有用的，因为 useSelector 会覆盖它。当编写 adiga 时，您必须设置不带 {} 的initialFormState。另一种想法:我认为你不能在不使用调度的情况下执行 error.image = ""