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;

您的reducer名为addprescription。在mapStateToProps中，您需要...

变化

prescription : state.prescription

到

prescription : state.addprescription

或者更好地重命名你的减速机。目前，state.prescription不存在。 state.addprescription[0].prescription是你的reducer采取行动之后会存在的，但你仍然没有因为减速器名称而将这种状态映射到你的道具。

编辑：查看代码沙箱后;

我看到您向state.addprescription[0].prescription添加了mapStateToProps。问题是，你的初始状态是一个空数组，所以我可以看到它是如何引发错误的。

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

将state.addprescription[0].prescription更改为state.addprescription。

现在您要向addprescription数组添加对象。因此，您在reducer中添加到这些对象的prescription密钥现在可以在this.props.prescription[index].prescription处获得。您可能想重新考虑一下您的命名约定？

这是一块裸骨working code sandbox example。应该可以从上到下轻松跟随。

尽管action和reducer被调用，但不调用componentWillReceiveProps

1 个答案: