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({})