Question

我发现自己处于这样一种情况，我需要在响应原生的onPress上设置应用程序的状态。我实现了下面的代码

   Alert.alert(
    'Delete Program',
    'Are you sure you want to delete this program?',
    [
      {text: 'OK', onPress: () => this.doRefreshState()},
    ],
    { cancelable: false }
  )

 doRefreshState = () =>{
    console.warn("i made it here")
    this.setState({})
  }

错误回复是：

＆＃34; _this2.doRefreshState不是函数。（在＆＃39; _this2.doRefreshState（）＆＃39;，＆＃39; _this2，doRefreshState;未定义）。

请注意，警报是另一个功能

Answer 1

首先，作为评论，我强烈建议您提供更完整的示例，以便我们获得更多信息（包括您的React Native版本和目标操作系统）。

我的猜测是你的方法实际上并没有绑定到类实例，或者在纯函数的情况下，是不可访问的。使用ES6语法，您可以尝试这样的事情：

class YourComponent extends React.Component {
  doRefreshState() {
    console.warn('method called') //personally I would use an alert here to verify
    this.setState({})
  }

  renderAlertContainer() {
    const onPressHandler = () => { //Bind to "this" with the lambda
      this.doRefreshState() 
    }

    return (
      <Button onPress={()=>{
        Alert.alert(
        'Delete Program',
        'Are you sure you want to delete this program?',
        [
          //{text: 'OK', onPress: () => this.doRefreshState()},
          { text: 'OK', onPress: onPressHandler }
        ],
        { cancelable: false }
      ) }} />
    )

  }

  render() {...}
}

我将这种方式格式化的原因是（1）可读性，它显示了我的意思是什么，以及（2）因为我实际上不确定“这个”是指什么时候被babel描述/ webpack / whatever（对于许多开发人员而言，“这个”在JavaScript中是一个有问题的语言功能）。你可能会跳进调试器并找出实际上是什么“this2”，但我的猜测是它没有绑定到你认为它的对象。

其次，根据您的类/对象/函数的构造方式，您可能需要将函数显式绑定到原型而不是实例。在这种情况下，最简单的解决方案（在我看来）是简单地将它添加到构造函数中：

class.....
{
  constructor(props) {
    super(props)
    this.doRefreshState = this.doRefrestState.bind(this) //annoying but now this method is bound to the class and I can act on it no matter the lifecycle state.
  } 
}

如果没有清楚地了解React.Component是如何初始化的，我无法确切地说，但我怀疑该方法是否需要绑定到实例（原型）或者是this对象。事实上，警报方法是在警报的上下文中执行而不是您的类，因此未定义。

我修复该类错误的首选技术是将处理程序拉出到变量中然后分配它，以便无论何时调用它，正确的上下文都是显式的而不是隐式的（隐含的）。

我应该注意：我刚刚将Android React Native App推出到客户端，我遇到的问题与我的问题非常相似。从方法中拉出处理程序几乎每次都解决了我的第三方调用中的问题。 坦率地说，我只是猜测这个问题的原因，因为我没有抓到调试器并想出来，但我怀疑我的两个解决方案中的一个会解决它。

Answer 2

尝试绑定函数而不是调用它。

示例：

Alert.alert(
  'Delete Program',
  'Are you sure you want to delete this program?',
  [
    {text: 'OK', onPress: this.doRefreshState},
  ],
  { cancelable: false }
)

doRefreshState = () =>{
  console.warn("i made it here")
  this.setState({})
}

希望这可以在您使用箭头功能时起作用。如果这不起作用，请尝试绑定函数，如。

Alert.alert(
  'Delete Program',
  'Are you sure you want to delete this program?',
  [
    {text: 'OK', onPress: this.doRefreshState.bind(this)},
  ],
  { cancelable: false }
)

doRefreshState() {
  console.warn("i made it here")
  this.setState({})
}

希望有所帮助。

Answer 3

检查你的doRefreshState函数是否超出了反应的生命周期方法？让我们说我从componentWillMount

调用它

componentWillMount(){
  Alert.alert(
     "Delete Program",
     "Are you sure you want to delete this program?",
     [{ text: "OK", onPress: () => this.doRefreshState() }],
     { cancelable: false }
   );
}

doRefreshState = () => {
  alert("i made it here");
  this.setState({});
};

render(){}

设置状态以响应本机警报＆on.Press错误

3 个答案: