我在Reactjs中面临一些困难。据我所知，componentWillMount是一个在呈现组件之前通过ajax调用加载数据的地方。我有一个简单的简单项目，其中使用已加载的数据填充面板堆栈并将其显示在板上。但是，来自ajax调用的数据在呈现组件之前未设置，这导致呈现带有空数组的电路板。以下是我的完整资料：
import React from "react";
export class Panel extends React.Component{
render() {
return (
<div>
<div className="row panel">
<div className="col-sm-12 header">sfsfsf</div>
<div className="col-sm-12 body">fsdfsfs</div>
<div className="col-sm-12 footer">fasfaf</div>
</div>
</div>
);
}
}
而Board类是问题的根源如下：
import React from "react";
import {Panel} from "./Panel";
export class Board extends React.Component{
constructor(props){
super();
this.state={news: []};
}
componentWillMount(){
this.state={news: []};
$.ajax({
url: "http://localhost:3003/json.txt",
dataType: 'json',
cache: false,
success: function(data) {
var arr=[];
for (var key in data) {
arr.push(data[key]);
console.log(data[key]);
}
this.state={news: arr};
}});
}
render() {
return (
<div>
{
this.state.news.map((item,i)=> <Panel key="i"/>)
}
</div>
);
}
}
最后一个类是index.js：
import React from "react";
import {render} from "react-dom";
import {Board} from "./component/Board";
class App extends React.Component{
render(){
return(
<div>
<Board/>
</div>
);
}
}
render(<App/>, document.getElementById('middle'));
因此，如您在Board.js类中看到的那样，我在render函数中初始化我的数组，然后使用componentWillMount填充新闻数组，我希望它在componentWillMount完成后会发生，但在我的情况下，渲染发生时该数组为空。任何的想法？
*********更新***************
我也用componentDidMount尝试了一下，但是没有用，同样的问题
componentWillMount() 在渲染之前完成，但是由于ajax是异步的，因此在请求完成之前它不会执行。
您不应使用来设置状态this.state = ...。而是使用：
this.setState({news: arr});
这将设置值并触发组件和所有子代进行渲染。只需编写您的render函数来很好地处理空数据，您将获得预期的结果而不会阻止JS执行。
如此处所示，它具有适当的绑定：
import React from "react";
import {Panel} from "./Panel";
export class Board extends React.Component{
constructor(props){
super();
}
getInitialState() {
return {news: []};
}
componentWillMount(){
$.ajax({
url: "http://localhost:3003/json.txt",
dataType: 'json',
cache: false,
success: (data) => {
var arr=[];
for (var key in data) {
arr.push(data[key]);
console.log(data[key]);
}
this.setState({news: arr});
}
});
}
render() {
return (
<div>
{
this.state.news.map((item,i)=> <Panel key="i"/>)
}
</div>
);
}
}
箭头功能处理绑定。Simmilar至function(){}.bind(this)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句