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 is not an object ( evaluating this3.state.collapsed )

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

请有人帮忙。谢谢

PS：不确定它是否会折叠所有视图或仅折叠点击的视图！

Answer 1

您应该 bind() 您的 renderItem 方法来访问 this.state，但最好将您的方法用作箭头函数以避免此类问题。您可以按如下方式创建函数，这样您的函数就可以访问 this:

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

FlatList renderItem 无法读取状态

FlatList renderItem cannot read the state

react-native

react-native-flatlist