如何使用reactjs在表中显示从api获取的数据

Question

我需要在 ui 中显示数据，我在下面给出了代码。

  export default class Dashboard extends Component {

constructor(props) {
    super(props);
    this.state = {
        userData:'',
        
    }
   
}
 componentDidMount() {
    var self = this
    axios.post("http://localhost:4000/signup/getData",  { emailid: localStorage.getItem("email")} )
 
    .then(function(res){
        
        self.state.userData = res.data  
        console.log("detail",self.state.userData)
       
     })

    .catch(function(err){
      console.log('Error',err)
    })
    }
render() {

    return (
        <div>
        <nav className="navbar navbar-expand-lg navbar-light fixed-top">
        <div className="container">
       
          <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul className="navbar-nav ml-auto">
               
              <li className="nav-item">
                <Link className="nav-link" to={"/sign-in"}>Logout</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
        <form onSubmit={this.handleSubmit}>
            <h3>Welcome</h3>
            <div>  
            <table  className="table center"  >
                    <thead>
                      <tr>
                        <th>Name</th>
                        <th>Email Id</th>
                        <th>Mobile Number</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                      <td>{this.state.userData }</td>
                         
                      </tr>      
                    </tbody>
                </table>
            </div> 
            
        </form>
        </div>
    );
}

}

这是下面的数据我收到{EMAILID： “xyzx@gmail.com”手机： “9898989898”的名字： “XYZ”密码： “$ 2A $ 10 $ Qu7rgYHDvCD9UNm4TKkw7.rPSF6VHxW1otSqlfCahtTOoIYfEA0Ly” __v：0 _id： “5fa520547833d049f0916699”原型：对象}

Answer 1

<tbody>
   <tr>
     <td>{this.state.userData ? this.state.userData.name : 'Loading...' }</td>
     <td>{this.state.userData ? this.state.userData.emailid: 'Loading...' }</td>
     <td>{this.state.userData ? this.state.userData.mobile: 'Loading...' }</td>
   </tr>      
</tbody>

您应该首先检查 this.state.userData 包含来自后端（axios 已完成）的数据，然后如果是，则调用它的属性而不显示“正在加载...”文本。 它会起作用。

Answer 2

而不是self.state.userData = res.data你必须使用setState 。 self.setState({...self.state, userData:res.data}) 。

Answer 3

componentDidMount() {

var self = this;

axios.post("http://localhost:4000/signup/getData", { emailid: localStorage.getItem("email")} )

.then(function(res){
    
    // self.state.userData = res.data  
    // instead of above line use below 
    self.setState(x=> {...x, userData: res.data})
    console.log("detail",self.state.userData)
   
 })

.catch(function(err){
  console.log('Error',err)
})

你不应该直接改变 react 组件中的状态，而是总是使用 setState。