ReactJS：組件屬性更改后重新渲染不起作用

Question

我有一個反應問題，但看不到問題可能在哪里。 對於下面的代碼：我創建了一個手風琴組件，該組件將根據狀態變量displayForm的值顯示和隱藏。

當有人按下InlineListComponent內部的按鈕時，應該使InlineListComponent內部的表單出現。 我在displayAction屬性中傳遞了this.displayTireAccessories。 我將displayForm的狀態變量從false重置為true，由於displayForm屬性值已更改，因此我認為這將觸發InlineListComponent重新呈現。 似乎並非如此。 我將console.log語句添加到displayAction和InlineListComponent的render方法。 我可以在displayForm上看到值的更新位置，但是，沒有從InlineListComponent打印任何console.log。

我在重新渲染的規則中遺漏了什么，使它無法正常工作？

<InlineListComponent
    orientation="Vertical"
    options={[{name: 'Tires', value: '1'},
        {name: 'Rims', value: '2'},
        {name: 'Hubcaps', value: '3'}]}
    text="name"
    label="Tire accessories (you must enter at least one)"
    key="tireAccessories"
    action={async (item, e) => {
        await this.displayTireAccessories(item);
    }}
    displayAction={async (e) => {
        await this.displayTireAccessories({});
    }}
    displayForm={this.state.displayForm}>
      <TireAccessories addAccessory={this.addAccessory}/>
</InlineListComponent>

this.displayTireAccessories = async (item) => {
  const {dispatch} = this.props;
  await this.setState({displayForm: true});
}

constructor(props){
    super(props);
    this.state = {
        displayForm: true
    }
}

Answer 1

您不能直接await setState ，它不會返回任何內容。 但是您可以使用其回調參數來保證您可以await ：

new Promise((resolve) => {
  this.setState(state, resolve)
});

順便說一句，每當您有一個異步函數僅在函數末尾等待一個promise時，就可以丟棄async await關鍵字並僅返回promise。

因此：

async (e) => {
    await this.displayTireAccessories({});
}

變成：

(e) => this.displayTireAccessories({})