javascript - ReactJS:组件属性更改后重新渲染不起作用

Question

我遇到了 react 问题，但我不知道问题出在哪里。对于下面的代码:我创建了一个 Accordion 组件，该组件将根据名为 displayForm 的状态变量的值进行显示和隐藏。

当有人按下 InlineListComponent 内部的按钮时，它应该使 InlineListComponent 内的表单出现。我在 displayAction 属性中传递 this.displayTireAccessories 。我正在将 displayForm 的状态变量从 false 重置为 true，我认为这会触发 InlineListComponent 重新渲染，因为 displayForm 属性值已更改。事实似乎并非如此。我向 displayAction 添加了 console.log 语句，并为 InlineListComponent 的 render 方法添加了 console.log 语句。我可以看到值在 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，它不会返回任何内容。但是您可以使用它的回调参数来保证您可以等待:

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

顺便说一句，每当您有一个异步函数，只在函数末尾等待一个 Promise 时，您可以丢弃 async wait 关键字并仅返回该 Promise。

所以:

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

变成:

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