Question

我尝试使用react-redux将道具传递给多个组件。我收到并试图传递的数据来自数据库，因此涉及异步性。因为在命中组件时没有定义道具，我的应用程序会抛出一个未定义的错误。在它抛出组件中的错误后，它继续解析状态，但是一旦定义了状态，它就不会使用新的道具重新渲染组件。另一个小块......我正在使用combineReducers。在使用combineReducers（仅使用婴儿减速器）之前，我没有遇到这个问题。它是在我制造了另一台减速机并将它与（婴儿减速机）结合后开始的。知道这里发生了什么吗？为什么我的组件重新渲染？

这是我的容器，它是渲染组件：

<div id="mainContent">
  <div id="photos">
    <div class="left imgbox">
      <img src="images/a.jpg" alt="A" />
    </div>
    <div class="details">A</div>
    <div class="left imgbox">
      <img src="images/b.JPG" alt="B" />
    </div>
    <div class="details">B</div>
    <div class="left imgbox">
      <img src="images/c.jpg" alt="C" />
    </div>
    <div class="details">C</div>
    <div class="left imgbox">
      <img src="images/d.jpg" alt="D" />
    </div>
    <div class="details">D</div>
  </div>
</div>

这是我的婴儿减速器：

    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)

这是我的CombinedReducer：

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

Here is a snapshot from chrome devTools of the error and the subsequent state

任何帮助将不胜感激。谢谢！

Answer 1

我认为这与以下事实有关：当您组合化简器时，您需要通过以下方式将它们包括在mapStateToProps中：

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

基本上，您必须确保在此处连接了适当的异径管。

无法将props传递给react-redux中的组件

1 个答案: