无法在 TypeScript 中访问 redux 状态对象的键答案

【问题标题】：Can't access redux state object's key in TypeScript无法在 TypeScript 中访问 redux 状态对象的键
【发布时间】：2020-09-09 16:28:33
【问题描述】：

我在 Ionic 中使用 typescript 和 React 钩子，所以我在其中添加了我的 errorReducer 来处理用户从服务器获取的错误，以防出现任何问题。

下面是我的代码

动作

  import { ERROR_OCCURED } from "./types";
    export const errorActions = () => async (dispatch: any) => {
      console.log('err action triggered')
      dispatch({
        type: ERROR_OCCURED
      });
    };

减速器

import { ERROR_OCCURED } from "../actions/types";
function fetchRedcuer(state = {}, action: any) {
  switch (action.type) {
    case ERROR_OCCURED:
      return {
        ...state,
         isauth:true
      };

    default:
      return state;
  }
}

export default fetchRedcuer;

然后在我的打字稿组件中

import { useSelector, useDispatch } from "react-redux";
import React, { useState, useEffect } from "react";
import { userRegisterAction } from "../../src/redux/actions/user";
import { RootState } from "../redux/reducers";

type IUser = {
  error: { [isauth: string]: boolean };
};

const Signup: React.FC<IUser> = (props) => {
  const [state, setState] = useState<IUser>({
  error:{}
  });
  const dispatch = useDispatch();
  const error = useSelector((state: RootState) => {
    console.log(state.error);                     //here i get access to my state that is inside error reducer and also here i get error when i try to access boolean value
    return { error: state.error };   
  });
  console.log(error.error);
  return (
    <div>

    </div>
  );
};

export default Signup;

等等

console.log(state.error)

最初我得到{}，但在状态更新后我得到

{isauth: true}

但是如果我尝试在 useSelector 中访问这个布尔值

console.log(state.error.isauth)

我收到了打字稿错误

类型“{}”上不存在属性“isauth”。

或者简单地说，我如何告诉 TypeScript 以某种方式最初跳过空的 object{} 并且不检查其键值对，因为更新状态需要一点时间

【问题讨论】：

标签： javascript reactjs typescript ionic4

【解决方案1】：

我建议保持一致，而不是传递空的错误对象 {}。

错误通过：

{ isauth: false; }

我相信 Typescript 只是为了这个目的，让你在早期阶段就知道你的错误。所以每个查看您的组件的人都会知道，您将提取（持有）的数据！

【讨论】：

所以即使我必须在数组中获取数据，我也需要首先在我的减速器中传递空数组，如 data:[] ..这就是你所说的????
@Ratnabhkumarrai 我说的是行 const [state, setState] = useState({ error:{} });你在哪里传递空（{}）错误对象并将这个空（{}）对象替换为 {isauth: false;} 和后面的行 console.log(state.error);您将停止收到 TS 错误。