Question

我的应用程序有一些问题。我想提供一些数据，但它总是检索空对象。

这是我的app.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setSearchField, requestRobots } from '../../appRedux/actions';


const mapStateToProps = (state) => {
  return {
    searchField: state.searchRobots.searchField,
    games: state.requestRobots,
    isPending: state.requestRobots.isPending
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onSearchChange: (event) => dispatch(setSearchField(event.target.value)),
    onRequestRobots: () => dispatch(requestRobots())
  }
}

class App extends Component {
  componentDidMount() {
    this.props.onRequestRobots();
  }

  render() {
    const { games, searchField, onSearchChange, isPending } = this.props;

    console.log("here it is" + games);



    return (
      <div className='tc'>
        <h1 className='f1'>RoboFriends</h1>
        <SearchBox searchChange={onSearchChange}/>

      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

我有console.log("here it is" + games);的地方总是检索空数据，但是当我进行控制台操作时，登录的action.js如下：

import {
    CHANGE_SEARCHFIELD,
    REQUEST_ROBOTS_PENDING,
    REQUEST_ROBOTS_SUCCESS,
    REQUEST_ROBOTS_FAILED,
  } from "../../constants/ActionTypes";
  import axios from 'util/Api'


  export const setSearchField = (text) => ({ type: CHANGE_SEARCHFIELD, payload: text })


  export const requestRobots = () => {
    return (dispatch) => {
      dispatch({ type: REQUEST_ROBOTS_PENDING });
      axios.post('/games',
      ).then(({ data }) => {
        console.log("Games data: ", data);
        if (data.result) {
          dispatch({ type: REQUEST_ROBOTS_SUCCESS, payload: data });
        } else {
          dispatch({ type: REQUEST_ROBOTS_FAILED, payload: data.error });
        }
      }).catch(function (error) {
        dispatch({ type: REQUEST_ROBOTS_FAILED, payload: error.message });
        console.log("Error****:", error.message);
      });
    }
  };

看到我有console.log("Games data: ", data);并且可以成功获取所需的信息吗？后端响应如下所示：

{
    "result": true,
    "games": [
        {
            "id": 1,
            "panelgameid": 71,
            "img": "https://cdn.wallpapersafari.com/67/50/EkSo4r.jpg",
            "name": "Counter-Strike 1.6",
            "active": 1,
            "minslots": 12,
            "maxslots": 32,
            "slotincreament": 2,
            "order": 1,
            "prices": [
                {
                    "id": 1,
                    "gameid": 1,
                    "location": "Serbia",
                    "price": 0.6
                },
                {
                    "id": 2,
                    "gameid": 1,
                    "location": "Germany",
                    "price": 0.4
                }
            ]
        }
}

Redux部分

import {CHANGE_SEARCHFIELD, REQUEST_ROBOTS_PENDING, REQUEST_ROBOTS_SUCCESS, REQUEST_ROBOTS_FAILED} from '../../constants/ActionTypes'

const initialStateSearch = {
    searchField: ''
  }

  export const searchRobots = (state=initialStateSearch, action={}) => {
    switch (action.type) {
      case CHANGE_SEARCHFIELD:
        return Object.assign({}, state, {searchField: action.payload})
      default:
        return state
    }
  }

  const initialStateRobots = {
    robots: [],
    isPending: true
  }

  export const requestRobots = (state=initialStateRobots, action={}) => {
    switch (action.type) {
      case REQUEST_ROBOTS_PENDING:
        return Object.assign({}, state, {isPending: true})
      case REQUEST_ROBOTS_SUCCESS:
        return Object.assign({}, state, {robots: action.payload, isPending: false})
      case REQUEST_ROBOTS_FAILED:
        return Object.assign({}, state, {error: action.payload})
      default:
        return state
    }
  }

Answer 1

在您的mapStateToProps中，您将state.requestRobots分配给games，但是您的状态包含{ robots, isPending }。因此，尝试将mapStateToProps更改为

const mapStateToProps = (state) => {
  return {
    searchField: state.searchRobots.searchField,
    games: state.requestRobots.robots,
    isPending: state.requestRobots.isPending
  }
}

反应空对象

1 个答案: