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不能正确设置状态

2 个答案: