Question

我是React的新手，这是我与Redux的第一个项目。

我得到一些数据并在状态树中设置它。当我的reducer ADD_PRODUCTS_TO_CART运行时，我的Products->render()会运行，但Product->render()却没有，尽管有一把钥匙。

这是一个要点，它是最基本的，我可以把它煮沸。希望它有意义，我已经包含了一个代表树状态的文件，所以你可以看到数据结构。

https://gist.github.com/hoodweb/e4005e4f1fc95682d4dd9bf87b81fe39

TLDR：基本上，库存在州树中递减，但不会呈现。我做错了什么？

更新：我已在所有渲染方法中放入console.log()，以查看所调用的内容。当我减少我的产品库存时，不会调用该产品。这很可能是由于我正在做的.map(() => <Product/>)。我尝试更改我的key={}属性以包含这样的股票：

.map((obj) => <Product key={obj.ID.toString() + obj.Stock.toString()} data={obj} />)

这似乎有效。但我知道这是多么稳定。

更新2：似乎如果我将data={}属性放入这样的单独属性中 <Product key={obj.ID} stock={obj.Stock} title={obj.Title} price={obj.Price} beforePrice={obj.BeforePrice} 有用。所以这就是我现在的解决方案。

Answer 1

render Product的{{1}}函数：

if (data.Variations) { //TODO: Variation logic
    return false;
}

因为在data中你得到了Variations param，它会通过这个范围（因为Variations不是null或undefined）并且返回null而不是渲染组件。

删除return false，您的代码应该可以正常运行。

Answer 2

就像@kiarashws所说的那样，只要你return false方法render()，它就不会呈现。确保仅在您不想要时才进行渲染。

通常会看到这样的代码：

render() {
   if (props.shouldNotRender) 
      return null or false;

   return <div>
      ...
   </div>
}

尽管具有关键属性

2 个答案: