Question

是否可以设置ternary operator并调用start()函数。在API数据的影响下，pending将更改为true。我正在尝试使用按钮内的三元运算符并启动click事件。 Pending = true调用点击事件，即start ()函数。

{this.state.pending ? this.start() : null}

class Button extends Component {
  constructor() {
    super();

    this.state = {
      isRunning: false,
            pending: false
    };
  }

  componentDidMount() {
    axios.get
            axios({
                url: "https://app/api/v1/running",
                method: "GET",
                headers: {
                    'Authorization': `Bearer ${token}`           
                }
            })
            .then(response => {
                console.log(response);   
                    this.setState({
                        pending: response.data.pending   //true
                    });
            })
            .catch(error => {
                console.log(error);
            })
  }

    start = () => {
        console.log('AAAA');
  }

  render () {
    return (
            <button {this.state.pending ? this.start() : null} onClick={this.start}>
                Start
            </button> 
    );
  }
}

Answer 1

您可以在这里采用两种方法之一。

1。直接从api响应成功回调中运行函数

.then(response => {
                console.log(response);   
                    this.setState({
                        pending: response.data.pending   //true
                    });
                this.start();             //Here
            })

无论如何，如果您想在调用该函数之前更新状态，则只需在setState第二个参数的回调中调用该函数。 setState还接受一个函数作为其参数，并在执行更新后执行该函数。要记住这一点很重要，因为setState是异步操作的。因此，如果您想确保在调用之前值必须由于某种原因而更新，您可以采用这种方式。有关更多信息，请访问：https://reactjs.org/docs/react-component.html#setstate

.then(response => {
                    console.log(response);   
                        this.setState({
                            pending: response.data.pending   //true
                        }, this.start);
            })

2。使用组件生命周期方法来侦听状态更改并运行功能

componentDidUpdate = (prevProps, prevState) => {
  if(prevState.pending === false && this.state.pending === true){
    this.start()
  }
}

每当您有状态或属性更改componentDidUpdate就会执行。请注意，该组件在第一次安装时不会更新。而且从代码的外观来看，由于pending仅在此组件中是本地的，因此您无需在首次装入时捕获大小写。有关生命周期方法的更多参考：https://reactjs.org/docs/react-component.html

希望在这里消除您的困惑。干杯！

在按钮内三元运算符并调用函数

1 个答案: