FlatList renderItem 无法读取状态

Question

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

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

  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}
      );
    }
  }

加载数据后出现的错误：

TypeError : undefined 不是一个对象（评估 this3.state.collapsed)

就我尝试在<Collapsible collapsed={undefined} align="center"> 中设置未定义而言，我可以像预期的那样打印元素，但是由于未定义，touchableOpacity 不起作用。

请人帮忙。谢谢

PS：不确定它是否有效它会折叠所有视图或只是点击一个！

Answer 1

你应该bind()你的renderItem方法来访问this.state，但是最好使用你的方法作为箭头函数来避免这些类型的问题。 您可以使您的功能如下，这样您的功能访问this：

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