在功能中设置状态不会触发重新渲染

Question

我想在用户登录时创建加载指示符，但由于某种原因，JSX条件元素不会更新：

waitingOnLogin

为什么JSX会忽略base_url = "http://api.genius.com" headers = {'Authorization': 'Bearer ExYL8I-s_5jmbMPobq9WtNpywmmATJr5owM1X3DPIiGI_uYJJRrsKv6Y26KrxVCy'} /* temporary key */ song_title = "Radioactive" search_url = base_url + "/search" data = {'q': song_title} response = requests.get(search_url, data=data, headers=headers) json_r = response.json() ？

Answer 1

始终使用setState更新state值，不要直接改变state值，请使用：

handleLogin (event) {
    event.preventDefault()
    this.setState({ waitingOnLogin: true });
    this.props.userActions.login(this.state.email, this.state.password)
}

根据DOC：

  

不要直接改变this.state，因为之后调用setState（）可能   替换你所做的突变。把它当作状态对待   不可变的。

查看有关setState。

的详细信息

Answer 2

不要直接改变状态使用setState。 setState调用rerender，因此您的更改将反映，但是直接赋值不会发生rerender，因此不会反映任何更改。此外，您应始终使用setState来更改状态

handleLogin (event) {
    event.preventDefault()
    this.setState({waitingOnLogin:true});
    this.props.userActions.login(this.state.email, this.state.password)
  }