javascript - Undefined 不是 this.state 对象上的对象

Question

我正在设置一个 React Native 应用程序。在此应用程序中，我尝试包含一个可重用的顶部导航组件，该组件接受字符串数组，然后适本地呈现它们。当我尝试将数组字符串与给定字符串进行比较时，它会抛出以下错误:

Unhandeld JS 异常:TypeError:未定义不是对象(评估“this.state.choseTopNavigation”

插入字符串进行比较效果很好

在构造函数中设置状态对象

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, ScrollView, FlatList} from 'react-native';
import {Header, TopNavigationButton}  from './components';

type Props = {};
export default class App extends Component<Props> {


constructor(props) {
  super(props);
  this.state = { 
    topNavigationOptions : [
      {key: 'Quick Search'},
      {key: 'Person Search'}],
      chosenTopNavigation: 
      "Quick Search",
  };

}

}



renderItem({item}){
  if (item.key == this.state.chosenTopNavigation) {
    return (
        <TopNavigationButton>
          {item.key}
        </TopNavigationButton>
      )
  } else {
    return (
      <Text style = {styles.unchosenTextStyle}>
        {item.key}
      </Text>
    )
  }
}


  render() {
    return (
      <View>

        <Header>Header</Header>
        <ScrollView horizontal = {true}>
          <View style = {styles.navigationContainer}>
            <TopNavigationButton>Quick Search</TopNavigationButton>
            <Text style = {styles.unchosenTextStyle}>Person Search</Text>
          </View>
        </ScrollView>

      <FlatList 
        horizontal
        data={this.state.topNavigationOptions}
        renderItem = {this.renderItem}
      />

      </View>  
    );
  }
}

注意这有效

renderItem({item} ){
  if (item.key == "Quick Search") { //inserting a string directly works
    return (
        <TopNavigationButton>
          {item.key}
        </TopNavigationButton>
      )
  } else {
    return (
      <Text style = {styles.unchosenTextStyle}>
        {item.key}
      </Text>
    )
  }
}

非常感谢您的帮助!

Answer 1

您可以将函数设置为箭头函数，如下所示:

renderItem = ({item}) => {
// your existing code
}

或者您需要在构造函数中绑定(bind)函数，如下所示:

this.renderItem = this.renderItem.bind(this);