javascript - 第一次进入页面时，Reactjs 在 jquery/ajax 响应后不会重新渲染

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 的父级中，我正在做一些非常相似的事情，而且它实际上工作正常。下面是父级以及用户首次登录后第一次进入页面时正常工作的代码。App 和 EmployeeList 都会在 {children} 中调用

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 时，我都会得到我所描述的行为，但是当它没有运行时，一切都会运行良好。

不确定是否存在 React、Firebug 或其他问题的错误。