ReactJS 使用 if-rendering 时有组件消失

Question

Here is the question:

I have a ReactJS app with an if-statement rendering. After getting response from post-query to API I need to render component, but it appears for a second and then disappears. Where is the problem? Thank you!

handleSend() {
    try {
      axios.post('/login', {  posted_data: this.state.value, 
                              window_size: this.state.range_val, 
                              sin: this.state.value1, 
                              sin_v: this.state.value2 }).
                              then(response => this.setState({ token: response.data['data'] }));
         
    } catch (e) {
      console.log(`😱 Axios request failed: ${e}`);
    }
  }  
  
  render() {
    return (
      <div className = "MarkdownEditor">
        
        <Form> 
          ...
          <Button variant="primary" type="submit" onClick={this.handleSend}>
            Найти
          </Button>
          { this.state.token == "a" && 
            <h2> {this.state.token} </h2>
          } 
        </Form>
  
      </div>
    );
  }
}

Answer 1

If the Form component represents an actual HTML form element then you need to prevent the default behaviour when your button triggers a submit. Otherwise the page will immediately reload, which would explain your disappearing element.

handleSend(event) {
    event.preventDefault();
    ...
};