React native FlatList renderItem无法读取状态

加载平面列表时我的代码崩溃，因为一个变量的状态未定义，我试图查看发生了什么，所以在加载数据时打印值，我看到我在super.props上放了什么

请注意，我在主平面列表中嵌套了另一个平面列表：

  export default class List extends React.Component {
    constructor(props) {
    super(props)
    this.state = {
    collapsed: true,
    }
  }

   componentDidMount() {
    this.apiCall();
   }

  renderItem({ item, index }) {
  const collapsed = this.state;
  return 
  <View style={styles.card}>

    <TouchableOpacity onPress={ () => {
      this.setState({ collapsed: !this.state.collapsed });
      }}>
      <Text style={styles.header}>
        {item.name.trim()}
      </Text>
    </TouchableOpacity>

    <FlatList
    style={{paddingBottom: 20}}
    data={item.positions}
    numColumns={1}
    listKey={(item, index) => item.id}
    keyExtractor={(item, index) => item.id}
    renderItem={({ item, index }) => (

      <Collapsible collapsed={this.state.collapsed} align="center">
        <Text style={styles.position} >{item.position.trim()}</Text>
      </Collapsible>

        )}/>
  </View>
  }

  render() {
  const resizeMode = 'cover';
  const collapsed = this.state;
  return (

    <Text>{this.state.collapsed.toString()}</Text>

    {this.state.loaded ?
    <Animatable.View easing='ease-out-circ'
    duration={1000} animation="fadeIn" >

    <FlatList
    keyExtractor={(item, index) => item.id}
    removeClippedSubviews={true}
    maxToRenderPerBatch={32}
    initialNumToRender={64}
    contentContainerStyle={styles.list}
    data={this.state.data}
    numColumns={2}
    showsVerticalScrollIndicator={false}
    listKey={(item, index) => item.id}
    renderItem={this.renderItem}
    style={styles.list}
    />

    </Animatable.View> 
    : null}
      );
    }
  }

导出默认类列表扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
对,，
}
}
componentDidMount（）{
这是apiCall（）；
}
renderItem（{item，index}）{
const collapsed=this.state；
返回
{
this.setState（{collapsed:！this.state.collapsed}）；
}}>
{item.name.trim（）}
项目id}
keyExtractor={（项，索引）=>item.id}
renderItem={（{item，index}）=>(
{item.position.trim（）}
)}/>
}
render（）{
const resizeMode=‘cover’；
const collapsed=this.state；
返回(
{this.state.collapsed.toString（）}
{this.state.loaded？
项目id}
RemoveClippedSubview={true}
maxToRenderPerBatch={32}
initialNumToRender={64}
contentContainerStyle={styles.list}
data={this.state.data}
numColumns={2}
showsVerticalScrollIndicator={false}
listKey={（项，索引）=>item.id}
renderItem={this.renderItem}
style={style.list}
/>
：null}
);
}
}

加载数据后出现的错误：

TypeError:undefined不是对象（正在评估） 这3.state.completed）

就我在

中尝试的设置undefined而言，我可以像预期的那样打印元素，但是由于undefined，touchableOpacity无法工作

请找个人帮忙。谢谢

PS：不确定它是否有效，它将折叠所有视图或仅单击一个

您应该

bind（）

您的

renderItem

方法来访问

this.state

，但最好将您的方法用作箭头函数，以避免这些类型的问题。 您可以按如下方式创建函数，这样您的函数就可以访问此：

renderItem = ({item, index}) => {
   ...
}

---

它肯定是有效的，相反的显示状态没有变化，但没有发生任何变化，没有崩溃：（我还得到了这个错误：InputRange必须单调递增0Use extraData={this.state.collapsed}你是一个天才，非常感谢，现在所有的视图都像我预期的那样崩溃了，这个方法并没有解决我的问题，无论如何谢谢你的帮助，而且它只在第一次工作，顺便说一句，它太慢了。看看这个文档，它可以帮助你提高代码的性能。我希望它能帮助你。