mapStateToProps возвращает пустой объект - PullRequest
Новая
       21

mapStateToProps возвращает пустой объект

0 голосов
/ 27 декабря 2018

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();

1 Ответ

0 голосов
/ 27 декабря 2018

Вы вызываете вызов функции fetchWeights в компоненте App, и ответ не будет получен до первого рендеринга компонентов DisplayWeights и, следовательно, его значение не определено в constructor из DisplayWeight.Также вам нужно назначить реквизиты для состояния, если состояние является напрямую выводимым реквизитом формы, если, конечно, вы не хотите изменить его локально, а затем при отправке обновите его в реквизите.

...