反應和渲染標籤

所以，我渲染標籤的標題「renderTitles（）」。當我點擊標題並將其設置爲「selected」prop時，我需要獲取標籤的索引。「handleClick（）」顯示當前索引 - 沒關係，但我不明白爲什麼「selected」的狀態不一樣。我錯在哪裏？反應和渲染標籤

const tabTitle = ['Prices', 'Description', 'Analytics']; 
 

 
class Tabs extends React.Component { 
 
    
 
    constructor(props) { 
 
     super(props); 
 
      
 
     this.state = { 
 
      selected: 0 
 
     } 
 
    } 
 
    
 
    handleClick(index) { 
 
     this.setState({ selected: index }) 
 
     console.log(this.state.selected) 
 
     console.log(index) 
 
    } 
 
    
 
    renderTitles() { 
 
     return tabTitle.map((el, index) => { 
 
      return (
 
       <li key={index}> 
 
        <a href="#" 
 
         onClick={this.handleClick.bind(this, index)}> 
 
         {el} 
 
        </a> 
 
       </li> 
 
      ); 
 
     }) 
 
    } 
 
    
 
    render() { 
 
     return (
 
      <div> 
 
       <ul>{this.renderTitles()}</ul> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
Tabs.propTypes = { 
 
    selected: React.PropTypes.number 
 
} 
 

 
ReactDOM.render(
 
    <Tabs />, 
 
    document.getElementById('root') 
 
);

<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> 
 
<div id="root"></div>

來源

2016-11-04 evgkch

this.setState is asynchronous。如果您想查看selected設置爲何，請在超時後執行此操作：

this.setState({ selected: index }) 
setTimeout(function() { 
    console.log(this.state.selected); 
}, 1000);

來源

2016-11-04 18:36:59

是的，您是對的，謝謝！

{this.state.selected}

還可以！ – evgkch

我也可以指出，'this.state'的* new *值在每個'render'隱式知道。因此，在調用this.setState的子例程中調試'this.state'的新值幾乎是多餘的，除非您或多或少地確定React本身存在缺陷，或者某些庫與React交互（如果是後者，則停止使用該庫，IMNSHO）。 –

反應和渲染標籤

回答

相關問題