Question

我正在使用FlatList将一个函数从Parent传递给Children组件，但由于某种原因，出现错误，即undefined不是引用updateState函数的函数。

这是父组件：

class Home extends Component {

  /*
    data items here
  */

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

以下是子视图：

class ItemView extends Component {

  constructor(props) {
    super(props);
    this.state = { 
      data: "some data" 
    };
  }

  render() {
    return (
      <TouchableOpacity onPress={ () => this.props.updateParentState(this.state.data) }>
        <Text>Item name here</Text>
      </TouchableOpacity>
    )
  }

}

Answer 1

这可以解决您的问题：

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

如果您要将函数作为道具传递，则应始终使用.bind(this)函数，以便this不会丢失。或者，如果您不是.bind的粉丝，则可以使用箭头功能。

例如：

{() => this.renderItem()}

本机反应 - undefined不是函数updateState（）

1 个答案: