無效的掛鈎調用。 使用調度。 Redux

Question

我嘗試了很多方法，但仍然出現錯誤消息“[未處理的 promise 拒絕：錯誤：無效的掛鈎調用。掛鈎只能在 function 組件的主體內部調用。”。

我現在仍在使用上下文 API，我將我的應用程序遷移到 Redux。 我正在嘗試做一件簡單的事情：當我按下一個按鈕時，我希望它調用一個 function，它將根據輸入調用我的減速器。

屏幕 Signup.js：

    const SignUp = ({ navigation }) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [pseudo, setPseudo] = useState("");
  const state = useSelector((state) => state.AuthReducer);
  
  return (
    <View style={styles.container}>  

        ...other stuffs
        
          <Button
            title="test"
            onPress={() => signUp({ email, pseudo, password, confirmPassword })}
          />
    </View>
  );
};

我的 authReducer.js

export const AuthReducer = (state = 0, action) => {
  switch (action.type) {
    case "signin":
      return {
        errorMessage: "",
        token: action.payload,
      };
    case "add_error":
      return { ...state, errorMessage: action.payload };

    ....Other cases....
    
    default:
      return state;
  }
};


export const signUp = async ({ email, pseudo, password, confirmPassword }) => {
  const dispatch = useDispatch();

 
  try {
    response = await trackerApi.post("/api/signup", {
      email,
      pseudo,
      password,
    });
    await AsyncStorage.setItem("token", response.data.token);
    dispatch({
      type: "signin",
      payload: response.data.token,
    });
    RootNavigation.navigate("Tabs");
  } catch (err) {
    const { response } = err;
    const { request, ...errorObject } = response;
    let message = errorObject.data;
    dispatch({
      type: "add_error",
      payload: message,
    });
  }
};

即使像這樣簡單的 function 也不起作用：

export const signUp = async ({ email, pseudo, password, confirmPassword }) => {
  const dispatch = useDispatch();

  dispatch({ type: "add_error", payload: "test" });
};

Answer 1

useDispatch是一個鈎子，因此只能在功能組件內部調用。 您在注冊方法中調用鈎子，這就是它拋出錯誤的原因。

在您的SignUp組件中試試這個 -

const SignUp = ({ navigation }) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [pseudo, setPseudo] = useState("");
  const state = useSelector((state) => state.AuthReducer);
  const dispatch = useDispatch();

  return (
    <View style={styles.container}>  

        ...other stuffs
        
          <Button
            title="test"
            onPress={() => signUp({ email, pseudo, password, confirmPassword }, dispatch)}
          />
    </View>
  );
};

並在signup時，像這樣 -

export const signUp = async ({ email, pseudo, password, confirmPassword }, dispatch) => {

 
  try {
    response = await trackerApi.post("/api/signup", {
      email,
      pseudo,
      password,
    });
    await AsyncStorage.setItem("token", response.data.token);
    dispatch({
      type: "signin",
      payload: response.data.token,
    });
    RootNavigation.navigate("Tabs");
  } catch (err) {
    const { response } = err;
    const { request, ...errorObject } = response;
    let message = errorObject.data;
    dispatch({
      type: "add_error",
      payload: message,
    });
  }
};