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

};

子：

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

<Header updateState={this.updateState} dataSet={this.dataSet} />

您创建了一个新功能，并且每次都不会将该参数传递给内部函数。

<Header updateState={(filteredResults) => this.updateState(filteredResults)} dataSet={this.dataSet} />

但这毫无意义。只是顺其自然。

Answer 2

原因是你正在调用没有参数的方法：

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

而不是像这样写：

updateState={this.updateState}

并使用updateState这样的函数：

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

或者另一种选择是在构造函数中定义绑定：

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

然后使用这样的函数：

updateState={this.updateState}

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

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

2 个答案: