React 不渲染来自回流存储的数据
React not rendering data coming from reflux store
我的代码在从商店传递数据后无法呈现,我遇到了麻烦。
我能够 console.log() 来自商店的数据,但数据未显示在 DOM 中。
这是我的组件的样子
var ItemList = React.createClass({
mixins: [Reflux.connect(SearchStore,"data")],
getItems() {
var items;
var self = this;
if(typeof self.state.data !== 'undefined' && self.state.data !== '404') {
items = self.state.data;
for(var key in items) {
if (items.hasOwnProperty(key)) {
items[key].map(function(obj, key){
return(
<h1>Test Test</h1>
);
})
}
}
} else {
return(<div></div>);
}
},
render() {
var self = this;
return (
<div id="search-results">
{self.getItems()}
</div>
);
}
});
export default ItemList;
数据在传递后进入,来自商店,我可以读取数据并能够呈现空的 div 但是带有文本的 div 没有呈现在全部。我的目的是获取传递的数据并将它们作为道具传递给另一个组件。
任何解决此问题的帮助都将非常有用,因为在过去的几个小时里我一直被困在这个问题上。
问题是 getItems
没有 return 呈现项目的数组。所以我会把它改成这样:
var ItemList = React.createClass({
mixins: [Reflux.connect(SearchStore,"data")],
renderItems() {
var output = [];
if (typeof this.state.data !== 'undefined' && this.state.data !== '404') {
for (var key in this.state.data) {
if (this.state.data.hasOwnProperty(key)) {
// should use each or forEach instead of map as we don't do anything
// with returned array but ignoring that issue
this.state.data[key].map(function(obj, key){
output.push(<h1>Test Test</h1>);
});
}
}
return output;
} else {
return <div/>;
}
},
render() {
return (
<div id="search-results">
{
this.renderItems()
}
</div>
);
}
});
export default ItemList;
我的代码在从商店传递数据后无法呈现,我遇到了麻烦。
我能够 console.log() 来自商店的数据,但数据未显示在 DOM 中。
这是我的组件的样子
var ItemList = React.createClass({
mixins: [Reflux.connect(SearchStore,"data")],
getItems() {
var items;
var self = this;
if(typeof self.state.data !== 'undefined' && self.state.data !== '404') {
items = self.state.data;
for(var key in items) {
if (items.hasOwnProperty(key)) {
items[key].map(function(obj, key){
return(
<h1>Test Test</h1>
);
})
}
}
} else {
return(<div></div>);
}
},
render() {
var self = this;
return (
<div id="search-results">
{self.getItems()}
</div>
);
}
});
export default ItemList;
数据在传递后进入,来自商店,我可以读取数据并能够呈现空的 div 但是带有文本的 div 没有呈现在全部。我的目的是获取传递的数据并将它们作为道具传递给另一个组件。
任何解决此问题的帮助都将非常有用,因为在过去的几个小时里我一直被困在这个问题上。
问题是 getItems
没有 return 呈现项目的数组。所以我会把它改成这样:
var ItemList = React.createClass({
mixins: [Reflux.connect(SearchStore,"data")],
renderItems() {
var output = [];
if (typeof this.state.data !== 'undefined' && this.state.data !== '404') {
for (var key in this.state.data) {
if (this.state.data.hasOwnProperty(key)) {
// should use each or forEach instead of map as we don't do anything
// with returned array but ignoring that issue
this.state.data[key].map(function(obj, key){
output.push(<h1>Test Test</h1>);
});
}
}
return output;
} else {
return <div/>;
}
},
render() {
return (
<div id="search-results">
{
this.renderItems()
}
</div>
);
}
});
export default ItemList;