componentWillReceivePropsはアクションにもリダンダントが呼び出されません

Question

これはそれぞれのアクションを呼び出すメインファイルです - addPrescriptionしかしthis.props.prescriptionにアクセスしているときに理想的に必要なデータが含まれている必要があります - 私はcomponentWillReceivePropsにアクセスできません。

import {connect} from 'react-redux'; 
import { addPrescription } from '../../actions/index'; 

class Prescription extends Component{ 
constructor(props) { 
super(props); 
this.state = {editorState: EditorState.createEmpty()}; 
this.onChange = (editorState) => this.setState({editorState}); 
} 

createPrescription(prescription){ 
     this.props.addPrescription("pravandan"); 
     console.log(this.state.prescription); 
} 

componentWillReceiveProps(nextProps){ 
    console.log(nextProps.prescription) 
} 

render(){ 
    return(
      <div> 
       <br/> 
       <br/> 
       <Row> 
        <Col span={12} push={6}> 
         <Button type="primary" onClick={() => this.createPrescription("")}>Submit</Button> 
         <br/> 
         <Button type="primary" onClick={() => this.createPrescription("")}>{this.props.prescription}</Button> 
        </Col> 
       </Row> 
      </div> 
     ); 
} 
} 

const mapStateToProps = (state, ownProps) => { 
return { 
prescription : state.prescription 
} 
}; 

const mapDispatchToProps = (dispatch) => { 
return { 
addPrescription : prescription => dispatch(addPrescription(prescription)) 
} 
}; 

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

Answer 1

あなたがこの投稿減速によると：

const addprescription = (state=[],action) => { 
     console.log("reducers received") 

    switch(action.type) { 
     case 'ADD_PRESCRIPTION' : 
      return [ 
       ...state, 
       { 
        prescription : action.prescription 
       } 
      ] 

     default : 
      return state; 
    } 
} 

export default addprescription; 

をお使いの減速がaddprescriptionという名前です。では、あなたのmapStateToPropsあなたの減速の名前を変更

prescription : state.prescription

prescription : state.addprescription

いっそ

に

変更...にする必要があります。現在、state.prescriptionは存在しません。 state.addprescription[0].prescriptionはあなたのレデューサーが行動を取った後に存在するものですが、あなたはレデューサー名のためにこの状態をあなたの小道具にマッピングしていません。

EDIT：コードサンドボックスを見た後。

state.addprescription[0].prescriptionをmapStateToPropsに追加しました。問題は、あなたの初期状態は空の配列なので、エラーがどのようにスローされるのかがわかります。

const mapStateToProps = (state, ownProps) => { 
    return { 
     prescription : state.addprescription[0].prescription 
    } 
    console.log(state.prescription) 
}; 

からstate.addprescriptionに変更してください。

ここで、addprescriptionアレイにオブジェクトを追加しています。あなたのレデューサーのオブジェクトに追加するprescriptionキーは、this.props.prescription[index].prescriptionで利用できるようになります。あなたの命名規則を再考したいかもしれませんか？

ここは裸の骨working code sandbox exampleです。トップダウンから簡単にフォローできます。