Question

我是新来的本地人，我无法理解这种行为。在异步函数中，我将加载布尔值设置为api调用之前的状态。现在奇怪的是：收到响应后，我无法将加载布尔值设置回false。它只是一直在等待setState函数，而没有到达回调。

我已经尝试在每个值的多个调用中设置setState。或全部在一个函数调用中。我还尝试将整个响应分配给状态。在本机反应中，我可以在从后端获取响应后控制台记录响应。当离开加载布尔值（到达回调）时，我也能够将响应分配给状态。但是当尝试将加载布尔值设置回false时，我无法将响应分配给状态。提示（也许）：在json响应中，我包含一个数组。当省略数组（不将其分配给状态）时，其行为类似于应... 请帮忙！

// here my mistery
export default class App extends React.Component {  
 constructor(props) {
  super(props);
 this.state = {
  loading: false,   
}
}

async onLogin() {
try {

  this.setState({ loading: true }, function () {
    console.log('loading is:' + this.state.loading)
  }); //works great

  const { name, password } = this.state;

  //here the api call
  const response = 
 await fetch(`http://10.0.2.2:3000/api/login/${name}&${password}`);
  const answer = await response.json();

  if (answer.user == 'OK') {

    //now the strange function-call
    this.setState({
      tickets: answer.tickets, //this is the array..!
      title: answer.event.title,
      token: answer.token.token,
      tokenDa: true,
      //loading: false, //only reaching callback when commenting that out
    }, function () {
      console.log('tickets are :' + this.state.tickets[0].kategorie)
    })

    // same behaviour here 
    // this.setState({loading: false},  function(){
    //   console.log('loading ist ' + this.state.loading);
    // });
  }
}
catch{
  console.log('in CATCH ERROR')
}
}

// here also the render function in case that matters:
render() {
if (this.state.loading) {
  return (
    <View style={styles.container}>
      <ActivityIndicator size='large' />
    </View>
  );
}

return this.state.tokenDa ? (
  <View style={styles.container}>
    <Text>Event Title : {this.state.title} </Text>


    <Button
      title={'scan'}
      style={styles.input} 

    />
    {this.state.tickets.map((ticket, i) => (
      <div key={i}>
        <Text >TicketKategorie : {ticket.kategorie}</Text>
        <Text > Datum und Türöffnung {ticket.gueltig_am}</Text>
        <Text >Verkauft {ticket.verkauft}</Text>
        <Text >Eingescannt {ticket.abbgebucht}</Text>
      </div>
    ))}
  </View>
) : (
    <View style={styles.container}>

      <TextInput
        value={this.state.name}
        onChangeText={(name) => this.setState({ name })}
        placeholder={'Username'}
        style={styles.input}
      />
      <TextInput
        value={this.state.password}
        onChangeText={(password) => this.setState({ password })}
        placeholder={'Password'}
        secureTextEntry={true}
        style={styles.input}
      />

      <Button
        title={'Login'}
        style={styles.input}
        onPress={this.onLogin.bind(this)}
      />
    </View>

  )
};
};

结果是：由于加载属性而导致的加载屏幕，我无法将其设置回false。为什么会这样！？

Answer 1

您可能已经推断出，setStates的异步性质存在问题。要解决此问题，我们可以创建另一个函数来处理实际的API请求，并将其用于第一个设置状态的回调。

setLoading = () => {
    this.setState({ loading: true }, () => this.onLogin())
}

onLogin = async () => {
  const { name, password } = this.state;

  //here the api call
  const response = await fetch(`http://10.0.2.2:3000/api/login/${name}&${password}`);
  const answer = await response.json();

  if (answer.user == 'OK') {
    this.setState({
      tickets: answer.ticketsm
      title: answer.event.title,
      token: answer.token.token,
      tokenDa: true,
      loading: false
    }, function () {
      console.log('tickets are :' + this.state.tickets[0].kategorie)
    })
}

Answer 2

您需要将其余的代码包装在第一个setState的回调中，像这样...

this.setState({ loading: true }, async function () {
  const { name, password } = this.state;
  const response = 
 await fetch(`http://10.0.2.2:3000/api/login/${name}&${password}`);
  const answer = response.json();

  if (answer.user == 'OK') {
    this.setState({
      tickets: answer.tickets, //this is the array..!
      title: answer.event.title,
      token: answer.token.token,
      tokenDa: true,
      loading: false
    });
  }
});

setState函数未分配布尔值。为什么？

2 个答案: