reactjs - 父元素未获取子函数调用参数

Question

我就快到了，只是缺少一件简单的事情。我正在修改父级的状态以及已通过函数的子级。问题是，当子进程使用参数调用从父进程传递的函数时，该参数不会在父进程的方法中被捕获。

父级:

export default class GameList extends Component {
  constructor({ navigation }) {
    super();
    this.navigation = navigation;
    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      test: 0,
    }

  updateState(filteredResults) {
    this.setState((prevState) => ({
      dataSource: this.ds.cloneWithRows(filteredResults),
    }));
  }
  render() {
    return (
      <View style={styles.background}>
        <Header updateState={() => { this.updateState() }} dataSet={this.dataSet} />
      </View >
    )
  }

};

child :

import React, { Component } from 'react';
import { View, TextInput } from 'react-native';

import styles from './styles';

class Header extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.input}
          placeholder="Search..."
          onChangeText={(text) => {
            const filteredResults = this.filterRows(text, this.props.dataSet);
            debugger;
            this.props.updateState(filteredResults);
          }}
        />
      </View>
    );
  }

  filterRows(searchText, dataSet) {
    return dataSet.filter((record) => record.title.includes(searchText));
  }
}


export default Header;

父级中的“filteredResults”未定义。

Answer 1

原因是您在不带参数的情况下调用该方法:

updateState={() => { this.updateState() }} //here

而不是这样写:

updateState={this.updateState}

并使用 updateState 函数，如下所示:

updateState = (filteredResults) =>  {
     this.setState((prevState) => ({
        dataSource: this.ds.cloneWithRows(filteredResults),
     }));
 }

或者另一种选择是在构造函数中定义绑定(bind):

this.updateState = this.updateState.bind(this);

然后像这样使用该函数:

updateState={this.updateState}

updateState(filteredResults) {
     this.setState((prevState) => ({
        dataSource: this.ds.cloneWithRows(filteredResults),
     }));
 }