Блог

У меня проблема с реактом, и я не вижу, в чем может быть проблема. Для приведенного ниже кода: я создал компонент accordion, который будет отображаться и скрываться в зависимости от значения переменной состояния, называемой displayForm.

Когда кто-то нажимает внутреннюю кнопку InlineListComponent, это должно привести к появлению формы внутри InlineListComponent. Я передаю this.displayTireAccessories в свойство displayAction. Я сбрасываю переменную состояния для displayForm с false на true, что, как я думал, затем вызовет повторный рендеринг InlineListComponent, поскольку значение свойства displayForm изменилось. Похоже, что это не так. Я добавил консоль.регистрируйте инструкции для displayAction и метод рендеринга для InlineListComponent. Я могу видеть, где значение обновляется в displayForm, однако я не получаю никакой консоли.войдите для печати из InlineListComponent.

Чего мне не хватает в правилах повторного рендеринга, из-за чего это не сработало бы?

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

Вы не можете использовать await a setState напрямую, это ничего не возвращает. НО вы можете использовать его аргумент обратного вызова, чтобы дать обещание, что вы сможете await :

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

Кстати, каждый раз, когда у вас есть асинхронная функция, которая ожидает только одно обещание в конце функции, вы можете отбросить async await ключевые слова и просто вернуть обещание.

Итак :

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

становится :

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