React Native报错：undefined is not a function (updateState)问题求助

这个问题的核心是**renderItem方法的this指向不对**——你直接把renderItem作为FlatList的props传入时，它内部的this并没有绑定到Home组件的实例上，所以调用this.updateState的时候自然就找不到这个函数了。我给你几个简单的修复方案：

方案1：在构造函数中绑定renderItem的this #

在Home组件的构造函数里，手动把renderItem方法的this绑定到组件实例上：

class Home extends Component {
  constructor(props) {
    super(props);
    // 绑定this到组件实例
    this.renderItem = this.renderItem.bind(this);
    this.state = {
      items: [] // 你的数据源
    };
  }

  updateState(data) {
    this.setState({ data: data });
  }

  renderItem() {
    return (
      <ItemView updateParentState={(data) => this.updateState(data)} />
    )
  }

  render() {
    return (
      <FlatList
        style={styles.fragmentContainer}
        data={this.state.items}
        keyExtractor={(item, index) => index.toString()}
        renderItem={this.renderItem}
      />
    )
  }
}

方案2：把renderItem改成箭头函数 #

箭头函数会自动绑定外层作用域的this，省去手动绑定的步骤：

class Home extends Component {
  state = {
    items: [] // 你的数据源
  };

  updateState(data) {
    this.setState({ data: data });
  }

  // 用箭头函数定义renderItem，自动绑定this
  renderItem = () => {
    return (
      <ItemView updateParentState={(data) => this.updateState(data)} />
    )
  }

  render() {
    return (
      <FlatList
        style={styles.fragmentContainer}
        data={this.state.items}
        keyExtractor={(item, index) => index.toString()}
        renderItem={this.renderItem}
      />
    )
  }
}

方案3：直接在FlatList的renderItem属性里写箭头函数 #

这种方式更简洁，直接在传入时用箭头函数包裹，确保this指向正确：

class Home extends Component {
  state = {
    items: [] // 你的数据源
  };

  updateState(data) {
    this.setState({ data: data });
  }

  render() {
    return (
      <FlatList
        style={styles.fragmentContainer}
        data={this.state.items}
        keyExtractor={(item, index) => index.toString()}
        // 直接用箭头函数作为renderItem，this自动指向Home组件
        renderItem={() => (
          <ItemView updateParentState={(data) => this.updateState(data)} />
        )}
      />
    )
  }
}

小优化：简化父组件函数的传递 #

你还可以把传递给子组件的updateParentState简化一下，不用额外套一层箭头函数：

// 方式1：绑定this后直接传递
<ItemView updateParentState={this.updateState.bind(this)} />

// 方式2：用箭头函数直接调用（和你原来的写法效果一致，但更简洁）
<ItemView updateParentState={(data) => this.updateState(data)} />

这样修改后，子组件触发onPress时就能正确调用父组件的updateState函数了。

内容的提问来源于stack exchange，提问作者Ketan Malhotra