如何使用react-redux中reducer狀態的值更新組件的狀態？

我有減速，讓我carReducer，我可以在EditCar組件道具使用：如何使用react-redux中reducer狀態的值更新組件的狀態？

我carReducer是：

export default function carReducer(state = {}, action) { 
    switch (action.type) { 
     case 'GET_SINGLECAR': 
      return { 
       ...state, 
       next: action.payload 
      } 
      break; 
    } 
    return state; 
}

而在EditCar組件我宣佈carReducer爲：

function mapStateToProps(state) { 
     return { 
      carReducer: state.carReducer 
     } 
    } 

export default connect(mapStateToProps, mapDispatchToProps)(EditCar);

現在在同一個組件中，我想在組件加載之前使用此carReducer更新我的intialState cardata。

constructor(props) { 
    super(props); 
    this.state = { 
     cardata: {} 
    } 
}

我嘗試使用componentWillReceiveProps但是這給了我兩個nextProps.carReducer和this.props.carReducerundefined。

componentWillReceiveProps(nextProps) { 
    if (nextProps.carReducer != this.props.carReducer) { 
     this.setState({ cardata: nextProps.carReducer }); 
    } 
}

我是新的react-redux所以任何幫助，高度讚賞。謝謝。

來源

2017-04-18 Novice JavaScript

你可以分享你減速，行動和你的商店代碼？ –

來自文檔：React在掛載期間不會調用componentWillReceiveProps和初始道具：https：//facebook.github.io/react/docs/react-component.html#componentwillreceiveprops – aabilio

爲什麼不直接將props.carReader指定給cardata構造函數？無論如何，你正在做的事情並不被認爲是一種好的做法，你只是有了REDX狀態，爲什麼要將它複製到組件狀態中呢？ – aabilio

在這種情況下，沒有必要使用componentWillRecieveProps。只是carReducer在減速取代next

來源

2017-04-18 07:54:17

this.props.carReducer的值可以在渲染部分訪問。但是在componentWillReceiveProps中沒有定義。 –

在這種情況下，不需要使用componentWillRecieveProps。我已經更新了我的答案，請在您的減速器中使用carReducer替換。 –

方法1 - 嘗試使用componentDidMount()

componentDidMount() { 
    this.setState = ({ 
    cardata: this.props.carReducer 
    }) 
}

方法2 - 你可以嘗試這樣做在構造函數本身

constructor(props) { 
    super(props); 
    this.state = { 
    cardata: props.carReducer 
    } 
}

來源

2017-04-18 07:59:34 iamsaksham

從方法1中得到'cardata'' undefined'並且在第二種情況下'cardata'根本沒有被改變，即它變空了。 –

從reducer獲取數據需要幾毫秒，所以它最初是未定義的。但是當數據來臨時，它必須自我放棄。你原來的'willRecieveProps（）'應該可以工作。 – iamsaksham

如何使用react-redux中reducer狀態的值更新組件的狀態？

回答

相關問題