获取类型错误：this.props.getMovieTree 不是函数

Question

我是 react native 和 redux 的新手，试图调用一个函数，但它给了我一个错误：

 this.prop.getMovieTree is undefined.

当我双击 getmovietree 时，它​​会将我重定向到正确的功能。但它在运行时出错并导致我的应用程序崩溃。当我 console.log(this.props) 它打印定义的值但是当我打印 console.log(this.props.getMovieTree()) 这打印未定义。

// 在 App.js 中：

import {getMovieTree} from './src/actions/RestActions'
export class App extends Component {
  static propTypes = {
    getMovieTree: PropTypes.func,
  };
  constructor(props) {
    super(props)
   }
componentWillMount()
{
this.props.getMovieTree();//at this line getting error: getmovietree() is undefined

}
}
const mapStateToProps = state => {
  const { movieList } = state;

  return {movieList};
};
export default connect(mapStateToProps,getMovieTree )(App);

// 在 RestAction.js 文件中：

import {MAGENTO_GET_MOVIE_TREE} from './types'
import {magento} from '../magento'
  export const getMovieTree = () => {
  return async dispatch => {
    try {
      const customer = await magento.getMovieTreeCall();
      dispatch({
        type: MAGENTO_GET_MOVIE_TREE,
        payload: customer
      });
    } catch (error) {
      console.log(error);
    }
  };
};

// 在 Index.js 中：

export default magento => {
return{
    getMovieTreeCall : () => {
        return new Promise((resolve, reject) => {
         // const path = '/V1/AppVersion/';

          magento
            .send()
            .then(data => {
              resolve(data);

            })
            .catch(e => {
              console.log(e);
              reject(e);
            });
        });
      },
};


};



In magento/index.js:




class Magento {

    send(){

        fetch("https://api.themoviedb.org/3/movie/now_playing?api_key=55957fcf3ba81b137f8fc01ac5a31fb5&language=en-US")
        .then(response => response.json())
        .then((responseJson) => {
            return response.json()
            // this.setState({
            //     loading: false,
            //     dataSource: responseJson.results
            // })
        })
        .catch(error => console.log(error))
    }


}

export const magento = new Magento();

Answer 1

• 首先，在 Magento 类中，您应该使用 await 或 Promise 来处理异步任务。方法应该是这样的：

异步发送（）{ 等待获取（“https://api.themoviedb.org/3/movie/now_playing?api_key=55957fcf3ba81b137f8fc01ac5a31fb5&language=en-US”） .then(响应 => response.json()) .then((responseJson) => { 返回响应.json() // this.setState({ // 加载：假， // 数据源：responseJson.results // }) }) .catch（错误=> console.log（错误）） } }

• 那么你应该将 dispatch 映射到 props ，然后将它连接到组件：

    const mapStateToProps = state => ({ getMovieTree: state.getMovieTree })
    //OR
    const mapDispatchToProps = dispatch => {
        return {
            getMovieTree: () => dispatch({  }) ///your desired action
        }
    }

    export default connect(mapStateToProps, mapDispatchToProps)(App); 

在这种情况下，我们不需要 mapDispatchToProps，您可以轻松地从 props 调用 getMovieTree。 connect() 的第二个参数是 mapDispatchProps，可以像这样未定义。

export default connect(mapStateToProps)(App);