React：Array在第一次後沒有按照正確的順序渲染

第一次渲染數組時，它的順序是正確的，但是如果它改變了，渲染順序保持不變。React：Array在第一次後沒有按照正確的順序渲染

例如：

construct() { 

    this.state = { 
     test_array: [1,2,3,4] 
    } 

    let self = this; 

    setTimeout(function(){ 
     self.scramble(); 
    }, 5000); 
} 


scramble() { 
    this.state.test_array = [3,1,2,4]; 
    this.setState(self.state); 
} 

render() { 

    this.state.test_array.forEach(function(item){ 
     console.log(item); 
    }); 

    return (
     <div> 

      {this.state.test_array} 

     </div> 
    ); 
}

結果：

On the console (the current order, correct): 
    3 
    1 
    2 
    4 

Rendered as DOM (the original order, incorrect): 
    1 
    2 
    3 
    4

知道爲什麼這失敗以正確的順序來呈現？

來源

2017-10-08 Robert F

好的 - 經驗教訓：不要忽略控制檯中的關鍵警告：「警告：數組或迭代器中的每個孩子都應該有一個唯一的」鍵「支柱。」請參閱：https://reactjs.org/docs/lists-and-keys.html#keys解決方案。 –

你非常接近。這裏有幾件事情我改變來解決它：

construct應該constructor
你總是需要調用super()作爲構造的第一道防線。（你真的不需要擔心這個，這是一個面向對象的事情，谷歌，如果你好奇）
使用「箭頭功能」，而不是「關鍵字功能」或.bind(this)防止this從不斷變化的環境
請勿修改this.state;隨時撥打this.setState如果你想改變這裏

class OrderThing extends React.Component { 
 
    constructor() { 
 
    super() 
 

 
    this.state = { 
 
     test_array: [1,2,3,4] 
 
    } 
 

 
    setTimeout(() => { 
 
     this.scramble(); 
 
    }, 5000); 
 
    } 
 

 

 
    scramble() { 
 
    this.setState({ 
 
     test_array: [3,1,2,4] 
 
    }); 
 
    } 
 

 
    render() { 
 
    this.state.test_array.forEach(function(item){ 
 
     console.log(item); 
 
    }); 
 

 
    return (
 
     <div> 
 
     {this.state.test_array} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
const div = document.createElement('div') 
 
document.body.appendChild(div) 
 
ReactDOM.render(<OrderThing />, div)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

來源

2017-10-08 19:22:34 Sidney

幾點建議。

所有的首先是在JS沒有construct()，但constructor()。

其次，你應該隨時撥打道具超級方法作爲參數的構造函數中，像這樣的：

constructor(props) { 
    super(props); 
    ... 
}

最後，開發商反應強烈建議修改國家只使用setState()方法。所以你應該重寫你的爭奪方法。

scramble() { 
    this.setState({test_array: [3,1,2,4]}); 
}

此更改應該會對您有所幫助。

來源

2017-10-08 19:27:29 lankovova

React：Array在第一次後沒有按照正確的順序渲染

回答

相關問題