反應計數器錯誤

當我點擊'+'計數器的作品，沒關係！但是當我點擊'添加元素'我的櫃檯失蹤！它不會與其他元素一起移動，如凍結！我認爲這種通話環境是真實的，我沒有看到任何錯誤。請幫忙！反應計數器錯誤

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

反應計數器錯誤

回答

相關問題