React：是否可以停止代码“阅读”，直到组件收到新的道具？

Question

我有一个组件，该组件具有newType在单击时创建并将其设置为状态的按钮。 types来自父组件的外部。如何在this.props.onCreateClick(this.state.selectedDate)运行时停止运行代码并等待我收到更新，types以便在我更新时types可以运行下一行？它是类组件。该按钮在 Props 示例中：props: types = [{id: 1, name: 'One'}, {id: 2, name: 'Two'}]this.state = {   selectedDates: [Date],    currentType: null, }<button    onClick={(e) => {        this.props.onCreateClick(this.state.selectedDate)        let newType = this.props.types[this.props.types.length - 1];         this.setState({            selectedDates: [],             currentType: newType.id        })    }}>Create</button>

Answer 1

我建议使用Promise

this.state = {

   selectedDates: [Date], 

   currentType: null, 

}

<button

    onClick={() => {

        this.props.onCreateClick(this.state.selectedDate).then(types => {

            let newType = types[types.length - 1]; 

            this.setState({

                selectedDates: [], 

                currentType: newType.id

            });

        }).catch(error => {

            //handle error

        });

    }}

>Create</button>

和onCreateClick函数返回无极其中reslove您收到新的类型，然后你处理它们在你的状态组件。

如果您希望可以将此代码更改为async\await，则与 promise 相同。

Answer 2

我会返回类似布尔值的内容onCreateClick()并将其存储在变量中。然后您可以轻松检查该变量是否已设置。

this.state = {

   selectedDates: [Date], 

   currentType: null, 

}

handleOnClick = () => {

  const isHandled = this.props.onCreateClick(this.state.selectedDate)

  if(isHandled){

    let newType = this.props.types[this.props.types.length - 1]; 

    this.setState({

       selectedDates: [], 

       currentType: newType.id

    })

  }

}

<button type="button" onClick={() => this.handleOnClick()}>Create</button>