CODEWITHSUNDEEP
javascriptreactjs
gureuso
gureuso

Reputation: 243

If print the console log, it is normal. but execution is empty

depth

<Body title="User List" subTitle="유저 목록 페이지입니다." store={this.props.store}>

<Sidebar store={this.props.store}/>

insert 2 depth.

main code

setSidebar = () => {
  const url = `${API_URI.SIDEBAR}?token=${this.props.store.token}`;
  console.log(url) // token is not empty
  axios.get(url).then((data: any) => {
    this.setState({activeUrls: 
      data.data.map((sidebar: any) => {
        const path = this.getSidebarPath(sidebar);
        return sidebar.allowed ?
        <li key={sidebar.key} className="nav-item">
          <Link href={path}><a href={path} className="nav-link">
            <i className={sidebar.icon}></i>
            <span>{sidebar.title}</span>
          </a></Link>
        </li> : <li></li>
      })
    });
  });
}

componentDidMount() {
  {this.setSidebar()};
}

this code is not empty token value.

token is empty

GET http://localhost:8000/apis/sidebar?token= 500

If print the console log, it is normal. but execution is empty.

Upvotes: 2

Views: 67

Answers (1)

Maxwell s.c
Maxwell s.c

Reputation: 1668

Your code has 2 problems:

  • You are having an 500 error, this is not related to react, check the network tag on your console and verify what is wrong with your ajax request
  • You are returning XML from an async function and storing it inside the state. This is not recommended

What you should do is store the data itself on state and use t on render:

render(){
return ...
       {this.state.ajaxData && ...}
}

Upvotes: 1

Related Questions