当下拉值更改时，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 函数的地方。

您可以在 React 文档 here 中找到 setState 回调参数。

但是无论哪种方式，您都无法编译。 (a) 你的界面应该以分号而不是逗号结束每个成员声明。 (b) 您在调用 fetch 的每一行中都缺少一个“)”。 (c) 在 fetchAccountDetails 函数中声明了 URL 变量，但随后将字符串 'URL' 传递给 fetch 函数，而不是变量。

这是一个工作代码沙箱，显示了对您的问题的修复和语法修复。我已经注释掉了对 fetch 函数的调用，因为它们无论如何都会失败。

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

当下拉值更改时，setState 未正确设置状态

setState does not set the state properly, when dropdown values changes

setstate

typescript

reactjs

semantic-ui-react