mapStateToProps 返回一个空对象答案

【问题标题】：mapStateToProps returning an empty objectmapStateToProps 返回一个空对象
【发布时间】：2018-12-27 05:44:55
【问题描述】：

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

【问题讨论】：

您以错误的方式获取值。在你的 mapStateToProps 函数中像这样改变。 const mapStateToProps = (state) => { debugger return {weights: state.fetchWeights.fetchWeights} // 这里你需要给reducer名字然后是初始状态值}

标签： reactjs api server localhost fetch

【解决方案1】：

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

【讨论】：