反应计数器错误

Question

当我点击＆＃39; +＆＃39;反作用，没关系！但是当我点击“添加元素”时我的柜台流浪！它不会像冷冻一样与其他元素一起移动！我认为呼叫背景是正确的，我没有看到任何错误。请帮忙！

＆＃13;

＆＃13;

src

＆＃13;

s

＆＃13;

＆＃13;

＆＃13;

Answer 1

因为<Counter/>与data不同步，所以它不属于data所以当data获取新元素时，它会呈现{{1}加上旧<li> <Counter />组件也没有真正更新（因为没有任何道具改变而且没有调用setState），所以当数据更新时，计数器的DOM保持不变。

另外，您的方法存在一些问题：

• 数据和addItem函数应该在某个组件
中
• 由于<Counter />在Counter内部作为私有状态，您将无法使用它（除非它使用flux体系结构发送动作）

您的count数组应该是data

中的状态

<ListContainer />

并将计数作为道具传递给this.state = { data : [ { id: 2, name: 'element', count: 0}, { id: 1, name: 'element', count: 0}, { id: 0, name: 'element', count: 0} ] }

我有一天创建了一个非常相似的代码，它可以帮助你Codepen