得到渲染

Question

对不起，这可能是很基本的，但我这个sutuation ...

class MyComponent extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
    selected: -1 
    } 
} 
this.list = [] 
for (let i = 0; i < myArray.length; i++) { 
    let item = <div>selected on this list : {this.state.selected}</div> 
    this.list.push(item) 
} 
render() { 
return (
    <div>selected: {this.state.selected}</div> 
    <div onClick={() => this.state.selected++}> 
    {this.list} 
    </div> 
} 
} 

这应该产生的外部更新组件的状态：

• 选择： - -1
• 此列表：1
此列表上
• -1此列表上
• ：-1
• 在此列表中：-1 ...

基本上所有的东西都会返回所选的值。

但是，当我在DIV上单击以增加选择的，我收到类似...

• 选择：2
• 这个名单上：-1
• 此列表： -1
• 这个名单上：-1
• 这个名单上：-1 ...

个多头它的更新...

• 选择：3,4,5,6,7 ...
• 这个名单上：-1
这个名单上
• ：-1
• -1
• 此列表：这个名单上-1 ...

换句话说：通过对/循环，而总是第一个div显示初始状态创建了列表的值在渲染器显示状态正确更新。

任何帮助？

Answer 1

的主要问题是，你的突变状态，而不是使用的setState（https://facebook.github.io/react/docs/react-component.html）

这将是一个例子：

class MyComponent extends React.Component { 
    constructor (props) { 
     super(props); 
     this.state = { 
      selected: -1 
     }; 
    } 

    updateSelected =() => { 
     this.setState({ 
      selected: this.state.selected + 1 
     }); 
    }; 

    render() { 
     let list = []; 

     //do whatever you need with list 

     return (
      <div> 
       <div>selected: {this.state.selected}</div> 
       <div onClick={this.updateSelected}> 
        {list} 
       </div> 
      </div>) 
    } 
} 

Answer 2

因为你是存储中的全局的UI项变量，并没有得到更新，因为循环将在初始渲染过程中只运行一次，所以存储在全局变量中的ui项将具有旧的状态值，另一件事是您更新状态值的方式不正确。

---

变化：

决不变异this.state直接，使用setState更新状态值。

2.将UI组件存储在状态变量或全局变量中并不是一个好主意，所有UI部分都必须在render方法内部。

而不是使用箭头函数内部渲染处理事件，绑定的方法构造为performance原因。

4.分配唯一的关键内部回路元件，检查DOC了解详情。

工作代码：

class MyComponent extends React.Component { 
 
    constructor() { 
 
    super() 
 
    this.state = { 
 
     selected: -1 
 
    } 
 
    this._handleClick = this._handleClick.bind(this); 
 
    } 
 

 
    _handleClick(){ 
 
    this.setState(prevState => ({ 
 
     selected: prevState.selected + 1, 
 
    })) 
 
    } 
 

 
    render() { 
 
    let items = []; 
 
    for (let i = 0; i < ([1,2,3,4,5]).length; i++) { 
 
     items.push(<div key={i}>selected on this list : {this.state.selected}</div>) 
 
    } 
 

 
    return (
 
     <div>   
 
      <div onClick={ this._handleClick }>Increment + </div> 
 
      <div>selected: {this.state.selected}</div> 
 
      {items} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<MyComponent/>, document.getElementById('app'))

<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='app'/>

Answer 3

你犯了几个错误：

1. 您使用组件的状态直接更新它的价值。您应该使用setState函数（读取here）
2. 您将组件存储在变量（列表）中。而不是这样做，您应该只存储数据并将其呈现在render函数或单独的组件中。
3. 尽量不要使用for循环。当您使用map和其他Array原型方法时，React的行为更具可预测性。

如果您想处理渲染之外的状态更改，请参阅compinentWillUpdate和componentDidUpdate方法。

工作实施例（fiddle）：

class MyComponent extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     selected: -1 
    } 

    this.handleOnClick = this.handleOnClick.bind(this); 
    } 

    render() { 
    const selected = this.state.selected; 
    const myArray = [1, 2, 3, 4]; 

    return (
     <div> 
     <div>selected: {selected}</div> 
     <div onClick={this.handleOnClick}> 
      {myArray.map((_, index) => <div key={index}>selected on this list: {selected}</div>)} 
     </div> 
     </div> 
    ) 
    } 

    handleOnClick() { 
    const selected = this.state.selected; 
    this.setState({ selected: selected + 1 }); 
    } 
}