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)
});

顺便说一句，每当您有一个异步函数在函数末尾等待一个诺言时，您就可以放弃async await关键字而只返回诺言。

所以：

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

成为：

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

ReactJS：更改组件属性后，重新渲染不起作用

1 个答案: