我的组件填充了一个数组，该数组确定将在 render 函数(显然是 componentDidMount 函数)中显示的内容
但是当它更新 this.state.containers 时没有任何反应。我已将 console.log 放入第一个 render循环，成功显示:
但是客户端没有任何变化，所以我不知道我的循环是否不好，但我没有收到 JS 错误。所以我不确定问题是什么，对于 React 来说还很陌生，所以任何帮助都会非常感谢。
var AdminForumContainer = React.createClass({
getInitialState: function() {
return { containers: [] }
},
componentDidMount: function() {
$.ajax({
method: 'GET',
url: '/admin/manage/forum/populate',
success: function(data) {
var {containers} = this.state;
for (var i = 0; i < data.length; i++) {
containers.push(data[i]);
}
this.setState({containers});
}.bind(this)
})
},
createMainThread: function(containerid) {
},
createSubThread: function(containerid) {
},
render: function() {
return (
<div>
{this.state.containers.map(function(container) {
{console.log(container)}
<table key={container.containerid} className="containers">
<caption>{container.containername}</caption>
<thead className="containerTitle">
<tr>
<td colspan="2">Main Threads</td>
</tr>
</thead>
<thead>
<tr>
<td>Thread Name</td>
<td>Delete</td>
</tr>
</thead>
<tbody>
{
container.mainthreads.map(function(mainthread) {
return (
<tr key={mainthread.threadid}>
<td>{mainthread.threadname}</td>
<td><button className="button alert">Delete</button></td>
</tr>
)
})
}
<tr>
<td><input type="text"/></td>
<td><button className="button">Create</button></td>
</tr>
</tbody>
<thead>
<tr>
<td colspan="2">Sub Threads</td>
</tr>
</thead>
<tbody>
{
container.mainthreads.map(function(subthread) {
return (<tr key={subthread.threadid}>
<td>{subthread.threadname}</td>
<td><button className="button alert">Delete</button></td>
</tr>)
})
}
<tr>
<td><input type="text"/></td>
<td><button className="button">Create</button></td>
</tr>
</tbody>
</table>
})}
</div>
)
}
});
ReactDOM.render(<AdminForumContainer/>, document.getElementById("AdminForumContainer"))
最佳答案
我会这样写:
var containers = this.state.containers;
for (var i = 0; i < data.length; i++) {
containers.push(data[i]);
}
this.setState({containers: containers});
现在可以用了吗？显示什么 this.setState({containers:containers}, function() { console.log(this.state)); ？
关于javascript - React Render 未更新 Ajax 查询的响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34170877/