在 react-redux 中實現 combineReducers 后，道具未傳遞給組件

Question

我正在嘗試使用 react-redux 將道具傳遞給多個組件。 我接收並嘗試傳遞的數據來自數據庫，因此涉及異步性。 因為 props 在碰到組件時沒有定義，所以我的應用程序拋出了一個未定義的錯誤。 在組件中拋出錯誤后，它會繼續解析狀態，但是一旦定義了狀態，它就不會使用新的 props 重新渲染組件。 另一個金塊……我正在使用 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

}

這是我的組合減速器：

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

這是 chrome 開發工具。 您可以看到“In Weight” {weight: "undefined"} 正在創建問題

您可以看到我通過“THIS IS RESULTS in Action assadkjasdfkjl; array”在錯誤發生后立即收到狀態，但在收到后不會重新渲染 BabyProfileContainer 和組件。

Answer 1

在你的減速器中試試這個。 類似地，為其他動作類型迭代相同的代碼。

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