reactjs - 无法从 reactjs（打字稿）中的组件调用操作

问题描述

我试图从我的函数中调用一个动作，但我得到的只是这个，我在我的其他组件中使用了相同的方法，它在那里工作正常，我不知道我在这里做错了什么

    this.props.getPosts is not a function
    at AddtodoForm.componentWillMount (AddtodoForm.tsx:30)
    at callComponentWillMount (react-dom.development.js:13985)
    at mountClassInstance (react-dom.development.js:14084)
    at updateClassComponent (react-dom.development.js:17771)
    at beginWork$1 (react-dom.development.js:19381)
    at HTMLUnknownElement.callCallback (react-dom.development.js:363)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
    at invokeGuardedCallback (react-dom.development.js:466)
    at beginWork$$1 (react-dom.development.js:24570)
    at performUnitOfWork (react-dom.development.js:23502)
    at workLoopSync (react-dom.development.js:23480)
    at renderRoot (react-dom.development.js:23155)
    at scheduleUpdateOnFiber (react-dom.development.js:22653)
    at scheduleRootUpdate (react-dom.development.js:25686)
    at updateContainerAtExpirationTime (react-dom.development.js:25712)
    at updateContainer (react-dom.development.js:25812)
    at react-dom.development.js:26370
    at unbatchedUpdates (react-dom.development.js:22952)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26369)
    at render (react-dom.development.js:26460)
    at Module../src/index.tsx (index.tsx:30)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.0 (index.tsx:15)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

我的 AddtodoForm 代码是

import React from 'react';
import {connect} from 'react-redux';
import { AddPostModel } from '../model/dataModels';
import {PostNewPost,getPosts} from '../actions/types';
export interface IProps{
    updateTodo?: Object
};
export interface IState{
    title : string,
    newTitle :string
};
interface IDispatchProp {
    getPosts:() => void;
}
type Props = & IProps & IDispatchProp  
export class AddtodoForm extends React.Component<Props,IState>{
    constructor(props :Props,state: IState){
            super(props)
        state={
           title : '',
           newTitle : ''
        }
    }
    onChange = (e : any) => {  
        this.setState({ title : e.target.value});
    }

    addtodoItem =() => {

        const add = this.state.title

        AddPostModel.id = add;


    } 
    render(){
        return(
                <div>              
                <input onChange={this.onChange} placeholder="Add todo"/>
                <br/>
                <button onClick={() => this.props.getPosts()}> Add todo</button>
                <br/>
                <br/>
            </div>
        )
    }
}
const mapDispatchToProps = (dispatch : any) => ({

    getPosts:() => dispatch(getPosts())
  });
export default connect(null,mapDispatchToProps)(AddtodoForm);

在我的操作中，我只是返回特定于每个调用的函数的类型，然后转到减速器并返回状态

import { todo} from '../models/todo';
import { deleteModel } from '../model/dataModels';

export enum ActionTypes {
    ADD_TODO = '[todos] ADD_TODO',  
    GET_TODO = '[todos] GET_TODO',
    CHECK_CONNECTION = '[todos] CHECK_CONNECTION',
    ERROR = 'ERROR',
    DELETE_TODO = 'DELETE_TODO',
    UPDATE_TODO = 'UPDATE_TODO',
    LOAD_IMAGES = 'LOAD_IMAGES',
    ADD_NEW_POST = 'ADD_NEW_POST'
  }

export interface AddTodoAction { type: ActionTypes, payload: any }

export const loadImages = () => (console.log('here'),{
  type: ActionTypes.LOAD_IMAGES
});

export const getPosts = ( posts ?: any) => ( console.log('I am in getPostAction'),{
  type: ActionTypes.GET_TODO,
  payload: posts,
});
export const PostNewPost = () => (console.log('I am posting new poost'),{
  type : ActionTypes.ADD_NEW_POST
})
export const DeletTodo = () => ( console.log(deleteModel.id),{
  type: ActionTypes.DELETE_TODO,
  payload : deleteModel.id
});

标签： reactjstypescriptreact-redux

reactjs - 无法从 reactjs（打字稿）中的组件调用操作

问题描述

解决方案

推荐阅读