我需要从get请求接收一些数据,然后将其作为道具发送到另一个组件。
然而,它似乎试图在收到我需要的状态之前呈现另一个组件。以下是当前代码:
class App extends Component{
constructor(props){
super(props);
this.state = {
logList:[],
};
}
componentWillMount(){
var me=this;
var logDirs, currentDirectory;
const request = axios.get(baseUrl+"/logs")
.then(function(response){
logDirs = response.data.logdirs;
currentDirectory = logDirs[me.props.directory];
axios.get(currentDirectory.name)
.then(function(response){
me.setState({
logList: response.data.logs
});
});
});
}
renderLogDirectories(){
if (this.state.logList.length>0){
return (<LogDirectories logs={this.state.logList}/>);
}
}
render(){
if(this.state.logList.length>0)
return (
<div>
{this.renderLogDirectories()}
</div>
);
}
}
下面是需要接收道具的组件:
class LogList extends Component{
render(){
var me = this;
return (
<ListGroup>
<ListGroupItem
bsStyle="success">{this.props.directory}</ListGroupItem>
{(this.props.logs).map(function (logList, key) {
return (
<Link><ListGroupItem key={key}>
{logList}
</ListGroupItem></Link>);
})}
</ListGroup>
);
}
}
那么,我能做些什么改变来让它发挥作用呢?
就目前而言,我遇到的错误有:
未捕获的不变违规:pp.render():必须返回有效的React元素(或null)。
未捕获(在promise)类型错误:无法读取属性'_currentElement'的空(...)
如果没有加载任何内容,您需要返回一个有效的元素,就像错误所说的那样。
render(){
if(this.state.logList.length>0) {
return (
<div>
{this.renderLogDirectories()}
</div>
);
}
return (<div>Loading</div>);
}