反应怪异的渲染行为
提问于 2017-11-21 13:00:10
即使打印items 会在返回函数之前记录一个填充的数组，但它实际上不会呈现任何内容。事实上，我知道不恰当地显示html并不是一个问题。因此，我开始怀疑，并在返回函数中对其进行了紧张处理，以确定是否确实存在数据输入日志，而令我恐惧的是，我意识到它并不存在。如代码所示，在返回函数中，我得到一个空数组！
class Derp extends Component {
constructor(props){
super(props);
mainStore.subscribe(this.render.bind(this));
}
render(){
var items = mainStore.getState().itemReducer.items;
console.log(items); //yields an array of items as expected
return (
<div>
<span>{JSON.stringify(items)} </span> //yields [] in the DOM !!!!!!!
//when it should yield the same as above, a fully populated array
{
items.map(item =>
<div key={item.id}>
{item.name}
</div>
)
}
</div>
)
}
}我已经成功地做了很多次了，但这一次我只是不知道它会有什么问题。谢谢你抽出时间。
编辑1:我知道这看起来很吓人(因为它确实如此)，但是组件正在监听所有的状态变化，比如：mainStore.subscribe(this.render.bind(this));，所以它应该总是能够访问更新的数据。
P.S:我意识到愚蠢的和聪明的组件，我不使用ReactRedux，我只是尝试和尝试一些不同的东西来激发好奇心。这是一种自我强加的“学习”代码。这不是为了生产或项目。
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-11-21 13:46:39
问题似乎是直接调用render。相反，调用forceUpdate()很好。我不是100%为什么会发生这种情况，但我怀疑调用render本身并不意味着什么，因为它可能需要在React管道中的React上下文中被调用。我可能是可怕的离开，如果是这样，请标记我，并描述它更好一点，我现在可以。
谢谢大家的帮助。
Stack Overflow用户
发布于 2017-11-21 13:02:57
从您的div函数返回map：
items.map(item =>
return <div key={item.id}>
item.name
</div>
)Stack Overflow用户
发布于 2017-11-21 13:12:29
尝试转义您希望呈现的内容：
items.map(item =>
<div key={item.id}>{item.name}</div>
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47422638
复制
腾讯云开发者
