Question

我能够从数据库中获取数据，它也显示在inspect元素上，但我的意思是UI上没有显示在浏览器中。

//storing the data into the posts
this.state = {
         displayMenu: false,
          posts: [ ]
        };

//click function for the drop down and handling the axios.get 
 Click = event => {
    event.preventDefault();
    let currentComponent = this;
      axios.get(`http://localhost:4000/api/AMS`)
      .then(function (response) {
        console.log(response);
        currentComponent.setState({posts: response.data})
      })
      .catch(function (error) {
        console.log(error);
      });
  }

//Render method
render() {
      // var back = {backgroundSize : 'cover'};
      var textStyle = {
        position: 'absolute', 
        top: '50%', 
        left: '50%'
      };
//From here the checking of data is happening, if the data is found inside the posts it will show it on the browser otherwise it will show no posts.
      const { posts } = this.state;
      const postList = posts.length ? (
        posts.map(post => {
          // console.log('hi');
          return (
            <div className="post card" key={post.ID}>
            <div className="card-content">
            </div>
            </div>
          )
        })
      ) : ( <div className="center">No posts yet</div>)

//RETURN method
 return (
          <div>
              {/* <Image 
                style={back} responsive 
                src={logo}>
              </Image> */}

              <div  style={textStyle} className="dropdown" style = {{background:"red",width:"200px"}} >
              <div className="button" onClick={this.showDropdownMenu}> Regions </div>

               { this.state.displayMenu ? (
               <ul>
              <li><a className="active" href="/AMS" onClick={this.Click}>AMS</a></li>
              <li><a href="/EMEA">EMEA</a></li>
              <li><a href="/APJ">APJ</a></li>
               </ul>
             ):(null)
             }
             </div>
//Here i am calling the postList variable
             {postList}
             {/* {this.state.posts}<br/>
             {this.state.pictures} */}
             </div>
          ); 
      }
}


Click = event => {
    event.preventDefault();
    let currentComponent = this;
      axios.get(`http://localhost:4000/api/AMS`)
      .then(function (response) {
        console.log(response);
        currentComponent.setState({posts: response.data})
      })
      .catch(function (error) {
        console.log(error);
      });
  }



render() {
      // var back = {backgroundSize : 'cover'};
      var textStyle = {
        position: 'absolute', 
        top: '50%', 
        left: '50%'
      };
      const { posts } = this.state;
      const postList = posts.length ? (
        posts.map(post => {
          // console.log('hi');
          return (
            <div className="post card" key={post.ID}>
            <div className="card-content">
            </div>
            </div>
          )
        })
      ) : ( <div className="center">No posts yet</div>)

我在检查元素控制台中得到的结果如下： ID：229，电子邮件：“ anuraguk3@gmail.com”，角色：“ BASE”，密码：“ $ 2b $ 10 $ ShTWYAtF8M5JLhEm68JqTuMx7P8x6dtOIkNsGz4wE21LY92xGoDCO”

Answer 1

在获得服务器响应之前呈现DOM。
因此，在这种情况下，您需要使用async-await。对于您的程序：-

 Click = async(event) => {
    event.preventDefault();
    let currentComponent = this;
      await axios.get(`http://localhost:4000/api/AMS`)
      .then(function (response) {
        console.log(response);
        currentComponent.setState({posts: response.data})
      })
      .catch(function (error) {
        console.log(error);
      });
  }

从Oracle数据库中获取数据并使用app.get在浏览器上显示

1 个答案: