我正在尝试使用react-redux将props传递给多个组件。我收到并试图传递的数据来自数据库,因此涉及异步性。因为在命中组件时没有定义props,我的应用程序会抛出一个未定义的错误。在它抛出组件中的错误后,它继续解析状态,但是一旦定义了状态,它就不会使用新的道具重新渲染组件。另一个金块......我正在使用combineReducers。在使用combineReducers(只使用baby-reducer)之前,我没有遇到这个问题。它是在我制造了另一台减速机并将它与(婴儿减速机)结合后开始的。知道这里发生了什么吗?为什么我的组件不会重新渲染?
这是我的容器,它是渲染组件:
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;数组”收到状态,但是BabyProfileContainer和组件在收到后没有重新呈现。
任何帮助将不胜感激。谢谢!
答案 0 :(得分:0)
在减速机中试试这个。同样,为其他动作类型迭代相同的代码。
case RECEIVE_BABY:
return {...state, baby: action.baby};
default:
return state;