反应计数器错误

当我点击'+'计数器的作品，没关系！但是当我点击'添加元素'我的柜台失踪！它不会与其他元素一起移动，如冻结！我认为这种通话环境是真实的，我没有看到任何错误。请帮忙！反应计数器错误

const data = [ 
 
\t { id: 2, name: 'element'}, 
 
\t { id: 1, name: 'element'}, 
 
\t { id: 0, name: 'element'} 
 
] 
 

 
const appendItem =() => { 
 
    data.unshift({ 
 
    id: data.length, 
 
    name: 'element' 
 
    }) 
 
    render() 
 
} 
 

 
class Counter extends React.PureComponent { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     count: 0 
 
    } 
 
    } 
 
    handleClick =() => this.setState({ count: this.state.count + 1 }); 
 
    render() { 
 
    return <span> 
 
     {this.state.count} 
 
     <button onClick={this.handleClick}>+</button> 
 
    </span> 
 
    } 
 
} 
 

 
const ListItem = 
 
    (item, idx) => 
 
    <li key={idx}>{item.id} - {item.name} - <Counter /></li> 
 

 
const List = 
 
\t ({ data }) => 
 
    \t <ul> 
 
     {data.map(ListItem)} 
 
    </ul> 
 

 
const ListContainer = 
 
\t() => 
 
    \t <div> 
 
    \t <List data={data}/> 
 
     <button onClick={appendItem}>add element</button> 
 
    </div> 
 

 
    const render = 
 
    () => 
 
     ReactDOM.render(<ListContainer />, document.getElementById('container')) 
 

 
    render()

<script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script> 
 
<script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script> 
 
<div id="container"> 
 
</div>

来源

2016-12-02 evgkch

这是因为<Counter/>是不同步data，它不是data一部分，所以当data得到一个新的元素，这将使<li>加上老<Counter /> 另外，<Counter />组件并不真正更新（因为没有道具改变，也没有调用setState），所以当数据更新时，计数器的DOM保持不变。

而且你的方法也存在一些问题：

数据和的addItem功能应该是一些组件
因为count是柜台内的私有状态的内部，你会不会能够使用它（除非它分派有焊剂体系结构的动作）

你data阵列应采用的内部的状态下<ListContainer />

this.state = { data : [ 
    { id: 2, name: 'element', count: 0}, 
    { id: 1, name: 'element', count: 0}, 
    { id: 0, name: 'element', count: 0} 
] 
}

，并通过计数当道具Counter

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

来源

2016-12-02 20:43:23 Kossel

太好了！谢谢！ – evgkch

反应计数器错误

回答

相关问题