Question

你好，我开始在redux反应中尝试用api玩游戏，我的问题是我的想法开始，我希望做出选择，并选择一天的所有结果：

我的组件ResultListItems：

import { connect } from 'react-redux';
import { fetchResults } from "../actions/index";



class ResultListItems extends Component {
  componentWillMount(){
      this.props.fetchResults();
  }

  render() {
    return (
      <div>
        <h2>Coucou la liste resultats</h2>
        <select></select>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    results: state.resultsReducer.results
  };
};


export default connect(mapStateToProps, null)(ResultListItems)

此刻我在文件夹action中的index.js中的Action我在url中有一个日期

import axios from "axios";

export const GET_RESULTS = "GET_RESULTS";

const END_POINT = "http://data.nba.net/10s/20200203";

export function fetchResults() {
  return function(dispatch) {
      axios.get(`${END_POINT}`)
            .then(axiosResponse => {
        dispatch({ type: GET_RESULTS, payload: axiosResponse.data});
      });
  }
}

我的reducer => reducer_results：


const initialResults ={
  results: []
}

export default function (state = initialResults, action) {
  switch (action.type) {
    case GET_RESULTS:
      return {
        results: action.payload
      };
  }
  return state
}

我在reducer文件夹中的index.js中导入：

import ReducerResults from "../reducers/reducer_results";

const rootReducer = combineReducers({
  resultsReducer: ReducerResults
});

export default rootReducer;

我的容器是results.js：

import { connect } from 'react-redux';
import ResultListItems from '../components/results_list_item'

class Results extends Component {
  render() {
    return (
      <div>
        <h1>App NBA</h1>
        <ResultListItems />
      </div>
    );
  }
}

export default connect()(Results);

Answer 1

您没有将fetchResults的api调用映射到props。请尝试以下操作。在将状态映射到prop之后，将分发也映射到组件ResultListItems中的prop。

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        fetchResults : () => dispatch(fetchResults()),
        dispatch
    }
 }

然后像这样连接它。

export default connect(mapStateToProps, mapDispatchToProps)(ResultListItems)

Answer 2

因此，您在道具列表中没有fetchResults，this.props.fetchResults是未定义的，因为您尚未将动作绑定到组件的道具。要处理它，您需要绑定actionCreator。使用指南：https://blog.benestudio.co/5-ways-to-connect-redux-actions-3f56af4009c8

或就是这样：

curl localhost:8000/graphql \ -F operations='{ "query": "mutation ($image: Upload!) { addImage(image: $image) { id } }", "variables": { "image": null } }' -F map='{ "0": ["variables.image"] }' -F 0=@/path/to/image

未捕获的TypeError：this.props.fetchResults不是函数

2 个答案: