react-reduxでcombineReducersを実装した後、プロンプトがcompenentsに渡されない

Question

react-reduxを使用して複数のコンポーネントにpropsを渡そうとしています。私が受け取り、渡そうとしているデータはデータベースからのものなので、非同期性が関与しています。小道具はコンポーネントに当たったときに定義されていないため、私のアプリは未定義のエラーを投げています。コンポーネントにエラーがスローされた後、状態の解決は継続されますが、Once状態が定義されると、コンポーネントは新しい小道具で再レンダリングされません。別のナゲット...私はcombineReducersを使用しています。 combineReducersを使う前に（私はベビーレデューサーを使っています）、私はこの問題を抱えていませんでした。それは私が別の減速機を作って（赤ちゃん減速機）と組み合わせた後に始まった。ここで何が起こっているのか？なぜ私のコンポーネントは再レンダリングされませんか？ここで

は、コンポーネントをレンダリングしている私のコンテナである：ここ

import React,{Component} from 'react' 
import store from '../store' 
import {connect} from 'react-redux'; 
import BabyProfile from '../components/BabyProfile' 
import Weight from '../components/Weight' 
import Height from '../components/Height' 
import Feed from '../components/Feed' 
import Sleep from '../components/Sleep' 
import Diaper from '../components/Diaper' 


class BabyProfileContainer extends Component { 

    render(){ 
    // console.log("RENDER PROPS", this.props) 
    const {baby, weight, height, feed, sleep, diapers} = this.props 

    return(
     <div> 
     <BabyProfile baby={baby}/> 
     <Weight weight={weight}/> 
     <Height height={height}/> 
     <Feed feed={feed}/> 
     <Sleep sleep={sleep}/> 
     <Diaper diapers={diapers}/> 
     </div> 
    ) 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    // console.log("MSTP Baby Container", state, "OWN PROPS", ownProps) 
    return { 
    baby: state.baby, 
    diapers: state.diapers, 
    weight: state.weight, 
    height: state.height, 
    sleep: state.sleep, 
    feed: state.feeding 
    } 
} 



export default connect(mapStateToProps)(BabyProfileContainer) 

は私の赤ちゃん-減速である：ここ

import {RECEIVE_BABY} from '../constants' 


const initialBabyState = { 
    baby: {}, 
    diapers: [], 
    weight: [], 
    height: [], 
    feeding: [], 
    sleep: [] 

} 

export default function(state = initialBabyState, action){ 
console.log('BABY REducer') 

const newState = Object.assign({}, state) 

    switch (action.type){ 

    case RECEIVE_BABY: 
    newState.baby = action.baby; 
    newState.diapers = action.diapers 
    newState.weight = action.weight; 
    newState.height = action.height; 
    newState.feeding = action.feeding; 
    newState.sleep = action.sleep 

    break; 




    default: 
     return state 

    } 
    return newState 

} 

は私combinedReducerです：ここでは

import {combineReducers} from 'redux' 
import baby from './baby-reducer' 
import parent from './parent-reducer' 



export default combineReducers({ 
    baby, 
    parent 

}) 

は自分の体重でありますコンポーネント：

ここで

import React from 'react'; 
import {Line} from 'react-chartjs-2' 


export default function(weight){ 


console.log("IN WEIGHT", weight) 
var weightArr = weight.weight 

const weightData = { 
    labels: weightArr.map(instance=>instance.date.slice(0,10)), 
    datasets:[{ 
    label: "baby weight", 
    backgroundColor: 'rgba(75,192,192,1)', 
    data: weightArr.map(instance =>(instance.weight)) 
    }] 
} 

const options ={ 

    maintainAspectRatio: false, 
    xAxes: [{ 
     stacked: true, 
       ticks: { 
        beginAtZero:true 
       } 
      }], 
    yAxes: [{ticks: { 
     beginAtZero:true 
    } 
    }] 
    } 



return (
    <div className="baby"> 
    <div> 
     <h3>I'm In weight component</h3> 
    </div> 
    <div className="weight"></div> 
    { 
    weightArr.map((weight,index) => (
     <div key={index}> 
     <span>{ weight.weight}</span> 
     </div> 
    )) 

    } 
    <div className="Chart"> 
    <Line data={weightData} width={200} height={200} options={options}/> 
    </div> 
    </div> 
); 
} 

は、自分の行動の作成者である：

import {RECEIVE_BABY} from '../constants' 
import axios from 'axios' 



export const receiveBaby = (baby,weight,height,sleep,diaper,feeding) =>({ 
    type: RECEIVE_BABY, 
    baby: baby, 
    weight: weight, 
    feeding: feeding, 
    height: height, 
    sleep: sleep, 
    diapers: diaper 

}) 



export const getBabyById = babyId => { 
    console.log("GET BABY BY ID") 
    return dispatch => { 
    Promise 
     .all([ 
     axios.get(`/api/baby/${babyId}`), 
     axios.get(`/api/baby/${babyId}/weight`), 
     axios.get(`/api/baby/${babyId}/height`), 
     axios.get(`/api/baby/${babyId}/sleep`), 
     axios.get(`/api/baby/${babyId}/diaper`), 
     axios.get(`/api/baby/${babyId}/feed`) 
     ]) 
     .then(results => results.map(r => r.data)) 
     .then(results => { 
     console.log("THIS IS RESULTS in Action assadkjasdfkjl;", results) 
     dispatch(receiveBaby(...results)); 
     }) 
     .catch(function(err){ 
     console.log(err) 
     }) 
    }; 
}; 

Here is chrome dev tools. You can see "In Weight" {weight: "undefined"} is creating the issue

あなたがこのアクションassadkjasdfkjlでRESULTS IS」を介して、私は右のエラーが発生した後の状態を受け取ることがわかります。配列」が、BabyProfileContainerおよびコンポーネントは、受領後に再レンダリングされません。

任意の助けをいただければ幸いです。ありがとう！

Answer 1

はあなたの減速でこれを試してみてください。同様に、他のアクションタイプで同じコードを繰り返す。

case RECEIVE_BABY: 
    return {...state, baby: action.baby}; 
    default: 
    return state;