setState не устанавливает состояние должным образом при изменении раскрывающихся значений

Question

У меня есть такой сценарий, где у меня есть раскрывающийся список, который тянет учетные записи пользователя, а затем на основе его выбора изменяется содержимое страницы. Я пытаюсь подход, который показан ниже, Кажется, что setState не вызывается должным образом или может быть вызывающая последовательность может быть неправильно. Не совсем понимаю, что не так. Изменение выпадающего значения не обновляет содержимое.

Помощь будет оценена.

import * as React from 'react';
import Select from 'semantic-ui-react/dist/commonjs/addons/Select';

interface IState{
  accountDetails[], // stores all details w.r.t an account
  userAccounts: [], // stores all accounts w.r.t a user
  selectedAccount : string, // selected account from the dropdown
  [x: string] : any,
}

export default class App extends React.Component<{},IState> {

  constructor(props:any){
    super(props);
    this.state = {
      accountDetails: [],
      userAccounts: [],
      selectedAccount: ''
    }
  }

  dropdownChange = (event: React.SyntheticEvent<HTMLElement>, data:any) => {
     this.setState(prevState => ({
      selectedAccount: data.value
     }), () => {});
  }

  async componentDidMount()
  {
      await this.fetchUserAccounts();
  }  


  fetchUserAccounts = async() => {
    //fetch API call for getting all user accounts by passing a user ID
    // I am able to get the data
    fetch('/api/fetch/accounts'
      .then(response => response.json())
      .then(data => this.setState({ userAccounts: data}));
    this.fetchAccountDetails();
  }    

  fetchAccountDetails = async() =>
  {
       let URL = "/api/fetch/account?accountId=" +this.state.selectedAccount;
       fetch('URL'
        .then(response => response.json())
        .then(data => this.setState({ accountDetails: data}));
  }

  render() {
    return(
       <div>
         <Select 
                 options={this.state.userAccounts} 
                 name="selectedAccount"  
                 value={this.state.selectedAccount}
                 onChange={this.dropdownChange}                         
        />
        // component to display the details
        <DetailComponent accounts={this.state.accountDetails} />
      </div>
    )
  }
}

Answer 1

Вам необходимо вызвать fetchAccountDetails сразу после изменения состояния, чтобы функция вызывалась с использованием самого последнего состояния, в котором раскрывающийся список изменился:

  dropdownChange = (event: React.SyntheticEvent<HTMLElement>, data:any) => {
     this.setState(prevState => ({
      selectedAccount: data.value
     }), () => { this.fetchAccountDetails() });
  }

Answer 2

функция setState является асинхронной, что означает, что вам необходимо принять особые меры предосторожности при обновлении состояния и ожидать использования обновленного значения в состоянии синхронно. По этой причине функция setState имеет второй параметр, который позволяет указать обратный вызов, который выполняется, когда состояние фактически обновлено. Здесь вам нужно вызвать функцию fetchAccountDetails.

Вы можете найти параметр обратного вызова setState, описанный в Документах React здесь .

Но у вас будут проблемы с компиляцией в любом случае. (a) Ваш интерфейс должен завершать каждое объявление члена точкой с запятой, а не запятой. (б) Вы пропускаете ")" в каждой строке с вызовом fetch. (c) В функции fetchAccountDetails вы объявляете переменную URL, но затем передаете строку 'URL' в функцию fetch, а не в переменную.

Вот рабочая песочница с кодом, показывающая исправление вашего вопроса и исправления синтаксиса. Я закомментировал вызовы функции fetch, так как они все равно не будут выполнены.

https://codesandbox.io/s/thirsty-rain-2u69e