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 ...

换句话说：for / loop创建的列表值始终显示初始状态，而渲染中的第一个div显示正确更新的状态。

有任何帮助吗？

Answer 1

你犯了几个错误：

您可以直接使用组件状态来更新它的值。您应该使用{ path: '', component: HomeListComponent }, { path: 'badge', children: [ { path: '', component: BadgeListComponent }, { path: 'badge-form', component: BadgeFormComponent }, { path: 'badge-form/:id', component: BadgeFormComponent } ] }函数（阅读here）
您将组件存储在变量（列表）中。您应该只存储数据并将其呈现在setState函数或单独的组件中。
尽量不要使用render循环。使用for和其他map原型方法时，React的行为更具可预测性。

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

工作示例（fiddle）：

Array

Answer 2

主要问题是你改变你的状态而不是使用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 3

因为你将ui-items存储在一个全局变量中并且没有获得更新，所以for循环在初始渲染期间只运行一次所以存储在全局变量中的ui项将具有旧的状态值，另一个是你更新状态值的方法是不正确的。

的变化：

1。 不要直接改变this.state ，使用 setState 更新状态值。

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

3. 而不是在渲染中使用箭头函数来处理事件，而是在 performance 原因的构造函数中绑定方法。

4. 分配内部循环元素的唯一键，查看 DOC 了解详细信息。

工作代码：

＆＃13;

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'))

＆＃13;

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

＆＃13;

获取渲染

3 个答案: