Question

感觉我的问题非常简单，但我无法理解为什么它不起作用。

为什么我要尝试做的是基本的东西 - 我将一个函数从父母传递到孩子，它应该增加父母的价值（这只是一个概念证据）＃34;测试＆＃34;值为1.调用父函数时会出现问题。我得到了＆＃39;无法读取undefined＆＃34;的属性测试。在调试器中this.props也是未定义的，所以毫不奇怪this.props.test将是。我错过了什么？

父：

export default class GameList extends Component {
  constructor({ navigation }) {
    super();
    this.state = {
      test: 0,
    }
  };


  updateState() {
    this.setState({
      test: this.state.test++,
    });
  }

  render() {
    return (
     <View style={styles.background}>
        <Header updateState={this.updateState} />   
     </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) => {
            this.props.updateState();
          }}
        />
      </View>
    );
  }

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


export default Header;

Answer 1

有两个问题：

绑定构造函数中的方法，为其提供正确的上下文。有关此原因的更多信息，请参见React documentation under Handling Events。
不要在状态属性上使用++，因为它会修改原始状态，并且在检查是否重新呈现时可能会失败任何比较（即是this.state.test === newState.test？是的，因为原始状态已被更改）。 React documentation under Component下有更多信息，请注意他们如何使用quantity: state.quantity + 1而不是quantity: state.quantity++

所以你得到：

export default class GameList extends Component {
  constructor({ navigation }) {
    super();
    this.state = {
      test: 0,
    }
    this.updateState = this.updateState.bind(this); // Bind to the correct context
  };


  updateState() {
    this.setState({
      test: this.state.test + 1, // Do not mutate the original state
    });
  }

  render() {
    return (
     <View style={styles.background}>
        <Header updateState={this.updateState} />   
     </View >
    )
  }
}

Answer 2

在父构造函数中，您需要正确绑定函数。

这就是它的样子：

constructor(props) {
  super(props);
  this.updateState = this.updateState.bind(this);
  this.state = { test: 0 };
}

Answer 3

调用this函数时，this.updateState上下文不再受约束，为此，您可以使用箭头函数（将this上下文设置为当前上下文）< / p>

查看有关箭头功能和此上下文的更多信息here

render() {
  return (
   <View style={styles.background}>
      <Header updateState={() => this.updateState()} />   
   </View >
  )
}

Answer 4

根据以上答案进行了修正，工作示例：

父：

export default class GameList extends Component {
  constructor({ navigation }) {
    super();
    this.state = {
      test: 0,
    }
  };

  updateState() {
    this.setState((prevState) => {
      debugger;
      return ({
        test: prevState.test + 1,
      });
    });
  }

  render() {
    return (
      <View style={styles.background}>
        <Header updateState={() => { this.updateState() }} />      
      </View >
    )
  }
}

子：

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


export default Header;

React子JSX元素不从父级继承它

4 个答案: