Question

试图在react native中的if else语句上运行一个函数，但是如果我像这样直接调用它的话.removeAlert（）我会因为调用setState而陷入无限循环崩溃。我读到您应该在一个函数中调用它，该函数在onPress函数中可以正常工作，但对我来说，它不能在该函数之外工作。

  class Settingscontainer extends Component {
  constructor() {
   super();
   this.removeAlert = this.removeAlert.bind(this);
  }
  removeAlert = () => {
    console.log("please work");
    // this.setState({ successAlert: false });
  };

  render() {
    this.props.isFocused
      ? console.log("Focused") // console.log working
      : () => {                // not working
          this.removeAlert();
        };
    return(<View>code...</View>
    )  
    }}

Answer 1

您所做的等同于此：

function callRemoveAlert() {
  this.removeAlert();
}
this.props.isFocused
    ? console.log("Focused")
    : callRemoveAlert

您定义了一个函数来调用this.removeAlert()，但决不要调用该函数。要使代码正常工作，您需要执行以下操作：

this.props.isFocused
    ? console.log("Focused")
    : this.removeAlert()

但是由于在removeAlert中，您打算修改状态，所以我不认为您应该这样做。默认情况下，React组件会在props和state发生每次更改时调用render。在您的实现中，render将触发setState，状态更改将触发render，从而导致状态更新和渲染的无限循环。更好的方法是使用componentDidUpdate：

componentDidUpdate(prevProps) {
    if (this.props.isFocused !== prevProps.isFocused) {
      (this.props.isFocused) ?
      ? console.log("Focused")
      : this.removeAlert();
    }
}

render() {
    return(<View>code...</View>
    )  
    }}

如果else语句不会自动运行功能，则进行本地响应

1 个答案: