Question

由于未定义一个变量的状态，导致在加载FlatList时我的代码崩溃，我试图查看正在发生的事情，因此在加载数据时打印值，就可以看到放置在super.props上的东西

请注意，我将另一个FlatList嵌套在主要的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">中设置undefined而言，我可以像期望的那样打印元素，但是由于undefined，touchableOpacity无法正常工作。

请帮助。谢谢

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

Answer 1

您应该bind()的{{1}}方法来访问renderItem，但是最好将您的方法用作箭头函数来避免这些类型的问题。您可以按照以下方式创建函数，以这种方式访问this.state：

this

FlatList renderItem无法读取状态

1 个答案: