无法访问对象的属性

时间:2019-04-15 05:58:33

标签: javascript reactjs react-redux redux-thunk web-frontend

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 enter image description here

中显示每个属性

1 个答案:

答案 0 :(得分:2)

您正在背对背调度这两个动作,并且在填充道具时会多次调用render方法。您应该遵循正确的组件生命周期方法,并避免呈现组件,直到您对这两个操作都有响应为止。