1
EDIT 2：解答は下記を参照してください。最初のページに入ったときにjquery/ajaxレスポンス後にReactjが再レンダリングされない
現在、コードは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
EDIT：ちょうどテストする、私はAJAX呼び出しの成功機能でthis.forceUpdate（）を実行しようとしましたが、それでも同じ動作を得ます。
私が指摘しておかなければならないもう一つのことは、EmployeeListの親であり、私は非常に似たようなことをしており、実際には正しく動作しています。以下は、親と第一は、ユーザーが最初にログインした後のページを入力するときに正常に動作しているコードです。アプリケーションおよび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>
)
}
}