[英]React DOM not re-rendering
My React JS file is below: 我的React JS文件如下:
The logic behind this: 其背后的逻辑:
1.) CreateTable
renders CreateColumns
, CreateRows
, & ChangeResults
1.)
CreateTable
呈现CreateColumns
, CreateRows
和ChangeResults
On the first render, CreateRows
is empty, but once the component mounts, a fetch()
call is made to update the rows, page re-renders and I have my table 在第一个渲染中,
CreateRows
为空,但是一旦安装了组件,就会执行fetch()
调用以更新行,重新渲染页面,然后我得到表
2.) ChangeResults
component is loaded which creates an input box. 2.)加载
ChangeResults
组件,该组件创建一个输入框。 State for num_of_rows
to an empty string (placeholder, not sure if I even need to do this). 将
num_of_rows
状态num_of_rows
为空字符串(占位符,不确定我是否需要这样做)。
When I input some number into the input field and hit click, onClick
runs updatePage
, which calls the function updateRows
(in CreateTable
), that then changes the state of people_per_page
. 当我在输入字段中输入一些数字并单击click时,
onClick
运行updatePage
,该函数调用函数updateRows
(在CreateTable
),然后更改people_per_page
的状态。 I have the console.log()
to verify that this is actually happening, and it prints out as expected. 我有
console.log()
来验证这是否确实在发生,并且按预期打印。
I thought that since CreateRows
inherits people_per_page
, and I'm changing the state of people_per_page
, it would cause a re-render...but nothing is happening. 我以为,既然
CreateRows
继承了people_per_page
,并且我正在更改people_per_page
的状态,它将导致重新渲染...但是什么也没发生。
Can anyone see why that might be? 谁能看到为什么呢?
var CreateTable = React.createClass({
getInitialState: function(){
console.log('initial state loaded')
return {
'table_columns' : ['id','email', 'first', 'last', 'title', 'company', 'linkedin', 'role'],
people_per_page: 34
}
},
updateRows: function(rows) {
console.log(rows)
this.setState(
{people_per_page: rows},
function() {
console.log(this.state.people_per_page)
}
)
},
render: function(){
return (
<div>
<ChangeResults updateRows = {this.updateRows} />
<table>
<CreateColumns columns={this.state.table_columns} />
<CreateRows num_of_rows = {this.state.people_per_page} />
</table>
</div>
)
}
});
var ChangeResults = React.createClass({
getInitialState: function(){
return {
num_of_rows : ''
}
},
handleChange: function(e) {
this.setState({
'num_of_rows' : e.target.value
});
},
updatePage: function(){
this.props.updateRows(this.state.num_of_rows);
},
render: function(){
return (
<div>
Number of people per page: <br />
<input type="text" onChange = {this.handleChange} />
<button onClick={this.updatePage}> Update Page </button>
</div>
)
}
})
var CreateColumns = React.createClass({
render: function(){
var columns = this.props.columns.map(function(column, i){
return (
<th key={i}>
{column}
</th>
)
});
return (
<thead>
<tr>
{columns}
</tr>
</thead>
)
}
});
var CreateRows = React.createClass({
getInitialState: function() {
return {
'people':[],
}
},
componentDidMount: function(){
console.log('componentDidMount running')
this.createRow();
},
createRow : function(){
console.log('starting fetch')
fetch('http://localhost:5000/search', {
method: 'POST',
body: JSON.stringify({
people_per_page: this.props.num_of_rows
})
})
.then(function(response) {
return response.json()
})
.then((responseJson) => {
return this.setState({'people' : responseJson.people })
});
},
render: function(){
var rows = this.state.people.map(function(row, i){
return (
<tr key={i}>
<td>{row['id']}</td>
<td>{row['email']}</td>
<td>{row['first']}</td>
<td>{row['last']}</td>
<td>{row['title']}</td>
<td>{row['company']}</td>
<td>{row['linkedin_url']}</td>
<td>{row['role']}</td>
</tr>
)
})
return (
<tbody>
{rows}
</tbody>
)
}
});
ReactDOM.render(<CreateTable />, document.getElementById('content'));
In <CreateRows />
, componentDidMount
is only called for the first render, when the component is 'mounted' on the page. 在
<CreateRows />
,仅在页面上“装入” componentDidMount
时才为第一个渲染调用componentDidMount。 After that, you need to fetch new data in componentDidUpdate
or somewhere else in the application. 之后,您需要在
componentDidUpdate
或应用程序中的其他位置获取新数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.