使用if-rendering时ReactJS的组件消失了

编程问答 2022-08-12

问题描述

这是问题：

我有一个带有if语句渲染的ReactJS应用。从后查询获得对API的响应后，我需要呈现组件，但它会显示一秒钟，然后消失。问题出在哪儿？谢谢！

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>
    );
  }
}

解决方法

如果#include "controller.hpp" template <size_t N> auto Controller<N>::empty_controller() -> Controller<1> { return Controller<1>([](auto,auto,auto) {}); } template <> constexpr Controller<1>::Controller(Callable _callable) : callables(std::array<Callable,1> { std::move(_callable) }) { } template <> constexpr Controller<1>::Controller() : Controller(empty_controller()) { } template <size_t N> constexpr Controller<N>::Controller(std::initializer_list<Callable> _list_callables) : callables(_list_callables) { } template <size_t N> void Controller<N>::call(const HTTPRequest& req,HTTPResponse& res,Context& ctx) { for (auto& callable : callables) { callable(req,res,ctx); } } 组件代表实际的HTML表单元素，那么当按钮触发提交时，您需要防止默认行为。否则，该页面将立即重新加载，这将说明您正在消失的元素。

Form
axiosjavascriptreactjsreactjs