将数组作为属性传递

时间:2016-07-20 16:52:10

标签: javascript reactjs react-native

我想知道是否可以将数组的值作为标记内的值传递?例如,以下代码:

var itemfeed = this.state.jsonData.map((item,i) => {
  return(
    <View key={i}>
      <TouchableHighlight val = {this.state.dataarray[i]} onPress={() => this.toggleExpanded2(i)}>
        <View style={styles.header}>
          <Text style={styles.headerText}>{item.date}</Text>
        </View>
      </TouchableHighlight>
      <Collapsible collapsed={this.state.dataarray[i]} align="center">
        <View style={styles.content}>
          <Text>{item.Desc}</Text>
        </View>
      </Collapsible>
    </View>             
  );

这是切换功能:

toggleExpanded2(i) {
  var newarr = this.state.dataarray;
  newarr[i] = !this.state.dataarray[i];

  this.setState({
    dataarray:newarr
  })
  this.setState({ collapsed: this.state.dataarray[i] });
  console.log("index" + i + "value"+ this.state.dataarray[i]+ "collapsed"+ this.state.collapsed);
}

将项目映射到视图元素。我试图将一个数组的值传递给折叠的属性,作为一个值,其中collapsed是一个布尔值。但是,它似乎没有起作用。我知道确实定义了数组的值。我要做的是让它在用户点击视图时,元素将显示并保持在那里,直到用户决定点击它并再次关闭它。是否显示取决于已折叠的值。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:2)

请勿将setState()视为同步操作,因为它可能不是:

  

setState()不会立即改变this.state,但会创建待处理状态转换。在调用此方法后访问this.state可能会返回现有值。

     

无法保证对setState的调用进行同步操作,并且可以对调用进行批处理以获得性能提升。

Source

不是在调用this.state后立即阅读this.setState(),而是依赖于本地突变的新状态,例如:

toggleExpanded2(i) {
  var newarr = this.state.dataarray.slice(0); // Create a shallow copy of `this.state.dataarray`, treating the state as immutable
  newarr[i] = !newarr[i];

  var newCollapsed = !newarr[i];

  this.setState({
    dataarray: newarr,
    collapsed: newCollapsed
  });

  console.log("index" + i + "value"+ newarr[i]+ "collapsed"+ newCollapsed);
}