时间戳

首页 > 解决方案 > mapStateToProps 返回一个空对象

reactjs - mapStateToProps 返回一个空对象

问题描述

mapStateToProps正在返回一个空对象，然后返回正确的对象。This.props.weights 在我的组件中未定义，除了内部渲染

const mapStateToProps = (state) => { 
  debugger
  return {weights: state.fetchWeights}
}

state = {saveWeight: Array(0), fetchWeights: Array(0)}

const mapStateToProps = (state) => {
  debugger
  return {weights: state.fetchWeights}
}

state = {saveWeight: Array(0), fetchWeights: Array(1)}

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Weight from '../components/Weight.js';

import '../App.css';

class displayWeights extends Component {

  constructor(props) {
   super(props);
   this.state = {weights: this.props.weights}; 
  }

 render() {
  return (
    <div>

    </div>
  );
 }
}

const mapStateToProps = (state) => {
  debugger
  return {weights: state.fetchWeights}
}

export default connect(mapStateToProps, {})(displayWeights);

-

import fetch from 'isomorphic-fetch';

export function fetchWeights() {

  return function(dispatch){
    dispatch({type: 'LOADING'})
    var url = 'http://localhost:3001/api/v1/weights.json';
    var req = new Request(url);
    return fetch(req)
    .then(function(response) {
      return response.json()
    })
     .then(function(weights) {
       debugger
        dispatch({type: 'FETCH_WEIGHTS', payload: weights})
    })
  }
}

export default (state = [], action) => {
  switch (action.type) {
    case 'FETCH_WEIGHTS':
      debugger
      return action.payload
    default:
      return state;
  }
}

import { combineReducers } from 'redux';
import saveWeight from './saveWeightReducer.js';
import fetchWeights from './fetchWeightsReducer.js';


export default combineReducers({
   saveWeight,
   fetchWeights
});

import React, { Component } from 'react';
import logo from './logo.svg';
import { connect } from 'react-redux';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';
import DisplayWeights from './containers/DisplayWeights.js'
import NewWeight from './containers/NewWeight.js'
import { fetchWeights } from './actions/fetchWeightsAction.js'
import Chart from './components/Chart.jsx';
import './App.css';

class App extends Component {

  componentDidMount() {
   this.props.fetchWeights()
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>Welcome to Weight Tracker</h1>
          <DisplayWeights />
          <NewWeight />
          <Chart />
        </header>
      </div>
    );
  }
}

export default connect(null, {fetchWeights})(App);

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './store.js';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

标签： reactjsapiserverlocalhostfetch

解决方案

您正在触发对 App 组件中 fetchWeights 的函数调用，并且在第一次渲染 DisplayWeights 组件之前不会收到响应，因此它在constructorof 中未定义DisplayWeight。此外，如果 state 是可直接派生的表单 props，您还需要将 props 分配给 state，除非您当然希望在本地更改它，然后在提交时在 props 中更新它。

推荐阅读