时间戳

首页 > 解决方案 > 我无法将数据从减速器获取到组件

javascript - 我无法将数据从减速器获取到组件

问题描述

我正在尝试将数据从减速器传递到组件并作为道具接收。

但是数据返回 UNDEFİNED，所以我尝试在 reducer 和 action 上控制台数据，但没关系。来自 API 的数据没有任何问题，但它总是返回到未定义的组件。我的错在哪里？

行动

export default ProfileTab;

import axios from 'axios';
import { BASE, API_KEY } from '../config/env';
export const FETCHED_MOVIES = 'FETCHED_MOVIES';

export function fetchMovies() {
  return (dispatch) => {
    axios
      .get(`${BASE}s=pokemon&apikey=${API_KEY}`)
      .then((result) => result.data)
      .then((data) =>
        dispatch({
          type: FETCHED_MOVIES,
          payload: data.Search,
        }),
      );
  };
}

减速器

import { FETCHED_MOVIES } from '../actions/movies';

const initialState = {
  fetching: false,
  fetched: false,
  movies: [],
  error: {},
};

export default (state = initialState, action) => {
  switch (action.type) {
    case 'FETCHED_MOVIES':
      return {
        ...state,
        movies: action.payload,
      };
    default:
      return state;
  }
};

零件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import { fetchMovies } from '../../actions/movies';

class Case extends Component {
  static propTypes = {
    movies: PropTypes.object.isRequired,
  };

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.fetchMovies();
  }

  onChangeHandler = (e) => {
    this.setState({
      input: e.target.value,
    });
  };

  render() {
    console.log(this.props.movies);

    return (
      <div>
        <div className="movies-root">
          <div className="movies-wrapper">
            <div className="movies-container safe-area">
              <h1>mert</h1>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    movies: state.movies,
  };
};

const mapDispatchToProps = {
  fetchMovies,
};

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

标签： javascriptreactjsreduxaction

解决方案

在连接语句中执行此操作：

export default connect(mapStateToProps,{fetchMovies})(Case);

mapDispatchToProps并从您的代码中删除该功能。

将 props 作为对象分发是非常不正确的。试试这个，它应该可以工作。

推荐阅读