React:json index undefined通过onclick按钮传递给数组迭代器

时间:2017-11-16 02:44:05

标签: javascript json reactjs material-ui

所以对于这个组件,它只显示一个卡列表,其中一些信息通过props传递,这是一个设置为事件状态的JSON数组。所以,因为每次我创建一个我想要渲染组件的次数的数组时它是可变数量的结果,这样可以正常工作。每张卡都有相关信息通过

this.state.events[i]

好的一切正常,除了一个点,这是FlatButton onClick动作。

<FlatButton label="Download ICS" onClick={() => console.log(this.state.events[i].location)} />

如果我尝试使用i访问状态,那么我将获得

TypeError: Cannot read property 'location' of undefined

或我选择的JSON的任何属性。 但是,如果我使用像5,4,3等实际的手动索引,那么它的工作正常。事实是,我需要每个按钮不同,否则其他事件卡有一个按钮,对该事件做错了。请记住,对于所有其他时间我使用i来访问JSON数组,它在上面工作正常,例如在CardText组件中。

这是一个视觉效果:

img

我不知道,它可能与组件生命周期有关,但我不太了解,无法准确了解。

由于

class SearchResultsList extends Component {
  constructor(props) {
    super(props);

  this.state = {
    events: [],
    eventsLength: 0,
   };
 }

 componentDidMount() {
     var count = Object.keys(this.props.events).length;
     this.setState({ events: this.props.events });
     this.setState({ eventsLength: count });
 };

 render() {
    var cardSearchHolder = [];
    for(var i = 0; i < this.state.eventsLength; i++) {
        cardSearchHolder.push(
            (
            <div key={i}>
            <Card>
               key={this.state.events[i]._id}
                <CardHeader
                  title={this.state.events[i].event_name}
                  subtitle={this.convertDateTime(this.state.events[i].start_date, this.state.events[i].end_date)}
                  actAsExpander={true}
                  showExpandableButton={true}
                />
                <CardText expandable={true}>
                  <div>
                    Category: {this.state.events[i].event_category}
                  </div>
                  <div>
                    Where: {this.state.events[i].location}
                  </div>
                  <div id="miniSpace"></div>
                  <div>
                    Description: {this.state.events[i].event_description}
                  </div>
                </CardText>
                <CardActions>
                  <FlatButton label="Download ICS" onClick={() => console.log(this.state.events[i].location)} />
                </CardActions>
              </Card>
              <div id="space"></div>
          </div>)
       );
    }
    return(
      <div>
         <MuiThemeProvider>
            <Card>
               {cardSearchHolder}
            </Card>
          </MuiThemeProvider>
          <div id="miniSpace"></div>
       </div>
    );
 }

}

0 个答案:

没有答案