reactjs中如何正确定义三元运算？

Question

我正在尝试制作一个功能

如果 X 为真 然后调用 setFalse 函数 ELSE 不要调用 setFalseFunction

    this.state = {
      X: true,
      Y: true,
      Z: true,
    };
  }

  setFalse() {

    this.setState({

      X: true ? this.setState.setFalse() : !this.setState.setFalse()),
      Y: true ? this.setState.setFalse() : !this.setState.setFalse()),
      Z: true ? this.setState.setFalse() : !this.setState.setFalse())

    });
  }

但这似乎不起作用，我也尝试过 X = true？而不是 X: true?，仍然没有运气。

Answer 1

首先，setState() 不是要使用的，如果您想要一种可以使false 成为您所有状态的方法，您需要执行以下操作：

this.state = {
  X: true,
  Y: true,
  Z: true,
};

// Change all the states to "false", without checking then
setFalse = () {
  this.setState({ X: false, Y: false, Z: false });
};

如果您想要检查每个状态的当前值，然后在此基础上分配一个新值，您可以这样做：

setFalse = () => {
  const { X, Y, Z } = this.state;

  // If the states are "true", change them to "false"
  this.setState({ X: X ? !X : X, Y: Y ? !Y : Y, Z: Z ? !Z : Z });
};

Answer 2

如果你想这样做 -> “如果 X 为真，则调用 setFalse 函数，否则不要调用 setFalseFunction”

那么你不需要setState 做任何事情，因为你没有改变你的变量（X，Y，Z）的状态！您只想验证它们是否为真，如果是，您想调用函数setFalse，对吗？

你可以通过简单地做到这一点，例如：

class App extends React.Component {
  state = {
    X: true,
    Y: true,
    Z: true,
  }

  setFalse() {
    console.log('I was called')
  }

  render() {
    const {X} = this.state

    return <div>{ X ? this.setFalse() : null }</div>
  }
}

现在，如果您想调用 setFalse 并更改变量的状态，那么您需要进入您的函数并执行以下操作：

  setFalse() {
    console.log('I was called')

    this.setState({
      X: false,
    })
  }

打开您的开发工具并查看状态变化，有一个工作示例here

我建议您了解一下 React 中的 生命周期 和 study it