Question

编辑2：请参阅下面的答案以获得解决方案。

目前，代码将使用jquery发出请求，获取响应并将数据加载到状态就好了。但是，当我第一次进入EmployeesTable页面时，它将在没有任何数据的情况下呈现，并且在我获得成功的响应并执行setState后不会重新渲染。

然而，更令人困惑的是，这只会在第一次进入页面时发生。如果我单击链接转到另一个页面然后返回到此页面，它将正常工作，在获得ajax响应后呈现并显示正确的数据。

知道我可能做错了什么吗？感谢。

module.exports = class EmployeeList extends React.Component {
  constructor() {
    super()
    this.state = {
      employees: [],
      isLoading: true
    }
  }
  componentDidMount() {
    if (localStorage.token) {
      this.loadEmployeesData()
    }
  }
  render() {
    return (
      <EmployeesTable isLoading={this.state.isLoading} employees={this.state.employees} />
    )
  }
  loadEmployeesData() {
    $.ajax({
      method: 'GET',
      url: '/api/employeelist/',
      datatype: 'json',
      headers: {
        'Authorization': 'Bearer ' + localStorage.token
      },
      success: function (res) {
        this.setState({ employees: res, isLoading: false })
      }.bind(this)
    })
  }
}

function EmployeesTable(props) {
  if (props.isLoading === true) {
        //return <Loading />
  }
  var employeesRows = []
  for (let e of props.employees) {
    employeesRows.push(
            <tr>
                <td>{e.first_name} {e.last_name}</td>
                <td>12</td>
            </tr>
        )
  }
  return (
        <div>
            <h2>Employees</h2>
            <table className="table table-responsive table-striped">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {employeesRows}
                </tbody>
            </table>
        </div>
  )
}
module.exports = EmployeesTable

编辑：为了测试，我尝试在ajax调用的成功函数中执行this.forceUpdate（），但仍然得到相同的行为。

我应该注意的另一件事是什么更令人困惑的是在EmployeeList的父母中，我做的事情非常相似，而且它实际上正常工作。下面是在用户首次登录后第一次进入页面时正常工作的父代码和代码。在{children}中调用App和EmployeeList

module.exports = class Main extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      sidebar: '',
      icon: 'fa fa-angle-left',
      toggleShow: true,
      user: [],
      loggedIn: false
    }
  }

  componentDidMount() {
    this.setState({ loggedIn: !!localStorage.token })
    if (localStorage.token) {
      this.loadUserData()
    }
  }

  componentDidUpdate() {
    if (!!localStorage.token !== this.state.loggedIn) {
      this.setState({ loggedIn: !!localStorage.token })
      if (localStorage.token) {
        this.loadUserData()
      }
    }
  }

  render() {

    var children = React.Children.map(this.props.children, (child) => {
      return React.cloneElement(child, {
        user: this.state.user
      })
    })

    return (
      <div className='main-container'>
        <Menu props={this.state} logoutHandler={() => this.logoutHandler()} />
        <div id="wrapper" className={this.state.sidebar}>
          <Header props={this.state} sidebarToggle={() => this.sidebarToggle()} />
          <div id="main" className="container-fluid">
            {children}
          </div>
          <Footer />
        </div>
      </div>
    )
  }

  sidebarToggle() {
    if (this.state.toggleShow) {
      this.setState({
        sidebar: 'hide-sidebar',
        icon: 'fa fa-angle-right',
        toggleShow: false
      })
    }
    else {
      this.setState({
        sidebar: '',
        icon: 'fa fa-angle-left',
        toggleShow: true
      })
    }
  }

  logoutHandler() {
    this.setState({user: []})
    auth.logout()
    Router.browserHistory.push('/login')
  }

  loadUserData() {
    $.ajax({
      method: 'GET',
      url: '/api/myinfo/',
      datatype: 'json',
      headers: {
        'Authorization': 'Bearer ' + localStorage.token
      },
      success: function (res) {
        this.setState({ user: res })
      }.bind(this)
    })
  }
}

module.exports = class App extends React.Component {
  render() {
    return (
            <div>
            <h1>Welcome {this.props.user.first_name}</h1>
            </div>
    )        
  }
}

Answer 1

我有答案，但不知道为什么或为什么这样做。我一直在使用firefox并使用firebug进行测试，因为当我打开firebug时，我得到了我描述的行为，但是当它没有运行时，那么一切都运行良好。

不确定是否有反应，萤火虫或其他东西。

第一次进入页面

1 个答案: