Question

我尝试与Redux一起建立我的第一个项目，但是在最后的细节上苦苦挣扎。尝试使用stateProps时，尝试访问Property XX does not exist on type (...)中的属性this.props.isLoading时收到错误Store。我使用React Redux和Router。

编辑： 我在mapDispatchToProps上也遇到了同样的问题，但是我仅在此处显示状态道具。（希望国家解决方案也能解决调度问题）

这是相关代码：

/ reducers中的

myReducer.ts

export default function reducer(
state = {
    isLoading: false,
},
action: any
    ): Record<string, any> {
    switch (action.type) {
        case "SET_LOADING": {
            return { ...state, earningHistorySolved: true };
        }
        default:
            return state;
    }
}

Reducer目录中的Index.ts

import { combineReducers } from "redux";
import myReducer from "./reducers";

export default combineReducers({
   myReducer 
});

myAction.ts

export function setLoading(): Record<string, any> {
    return {
        type: "SET_LOADING",
        payload: {
            testPayload: 1
        }
    };
}

App.tsx

class App extends Component {
    render(): React.ReactNode {
        return (
            <Provider store={store}>
                <Router>
                    <div>
                        <TopSection />
                        <Route exact path="/" component={StartCase} />
                        <Route
                            path="/cars/:carId/bike/:No"
                            component={Content}
                        />
                    </div>
                </Router>
            </Provider>
        );
    }
}
export { App }

我尝试使用道具的文件，（错误this.props.isLoading）

import React, { Component, ReactNode } from "react";
import { RouteComponentProps, withRouter } from "react-router-dom";
import { connect } from "react-redux";

interface IMyList {
    group?: number,
}

class myList extends Component<RouteComponentProps<any> & IMyList > {
    constructor(props: any) {
    super(props);
    }

    render(): ReactNode {
        return (
            <Layout>
                <Button flagged={this.props.isLoading}/>
            </Layout>
        );
    }
}

const mapStateToProps = function mapStateToProps(state: any): Record<string, any> {
    return {
        isLoading: state.myReducer.isLoading,
    };
};

export default withRouter(connect(mapStateToProps)(myList));

Answer 1

与Redux相比，这看起来更像是TypeScript问题，我不是TS专家，但从我的了解来看，您没有在组件定义中为isLoading提供任何定义。

它会出现，就像您刚刚忘记将isLoading添加到IMyList界面一样

interface IMyList {
  group?: number,
  isLoading: boolean
}

Redux存储，“属性XX不存在”

1 个答案: