class EventEdit extends Component {
constructor(props) {
super(props);
const { skillsets, events } = this.props;
this.state = {
skillsets : skillsets,
events : events
}
}
componentWillMount(){
this.props.getSkillset();
this.props.getEvent();
}
componentWillReceiveProps(props){
this.setState({
skillsets : props.skillsets,
events : props.events,
})
}
render() {
console.log(this.state.events) //it returns the object perfectly
console.log(this.state.events.title) //it says cannot read title of undefine
)
}
}
const mapStateToProps = (state, ownProps) => {
let id = ownProps.match.params.event_id;
return {
skillsets: state.skillset.skillsets,
events: state.event.events.find(event => event._id === id)
}
}
const mapDispatchToProps = dispatch => {
return {
getSkillset: () => { dispatch(getSkillset()) },
getEvent: () => { dispatch(getEvent()) },
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
因此,我使用动作redux从API成功获取了数据列表,并将其显示在组件中。
然后,我想编辑数组数据中的一项,获取ID并对其进行过滤。
实际上,每个属性都在控制台中显示,但是我无法在jsx
答案 0 :(得分:2)
您正在背对背调度这两个动作,并且在填充道具时会多次调用render方法。您应该遵循正确的组件生命周期方法,并避免呈现组件,直到您对这两个操作都有响应为止。