Javascript ReactJS无法引用已创建的状态

我只是想创建一个示例来了解状态如何在列表中工作

我打算做的是允许列表中重复的特定值通过使用state在列表中的所有项中进行更改。例如，在本例中，我希望在运行onClick的

changeName

时将所有列表项的名称更改为'lalala'

然而，我有这个警告（fiddle版本11中的问题，在版本15中解决）

为达到上述目的，有没有帮助解决此问题

实际代码

var items = [
    { name: 'Believe In Allah', link: 'https://www.quran.com' },
    { name: 'Prayer', link: 'https://www.quran.com' },
    { name: 'Zakat', link: 'https://www.quran.com' },
    { name: 'Fasting', link: 'https://www.quran.com' },
  { name: 'Hajj', link: 'https://www.quran.com' },
];

var ItemModule = React.createClass({
    getInitialState: function() {
        return { newName: this.props.name }
    },
    changeName() {
    console.log('changed name');
    this.setState({ newName: 'lalala' });
  },
    render() {
    //<!-- <a className='button' href={this.props.link}>{this.props.name}</a> -->
    return (
        <li onClick={this.changeName}>

        {this.state.newName}
      </li>
    );
  }
});

var RepeatModule = React.createClass({
    getInitialState: function() {
        return { items: [] }
    },
    render: function() {

        var listItems = this.props.items.map(function(item) {
            return (
                <div>
          <ItemModule
            key={item.name}
            name={item.name} />
        </div>
            );
        });

        return (
            <div className='pure-menu'>
                <h3>Islam Pillars</h3>
                <ul>
                    {listItems}
                </ul>
            </div>
        );
    }
});

ReactDOM.render(<RepeatModule items={items} />,                 
    document.getElementById('react-content'));

var项目=[
{姓名：'信仰真主'，链接：'https://www.quran.com' },
{名称：'祈祷'，链接：'https://www.quran.com' },
{名称：'Zakat'，链接：'https://www.quran.com' },
{名称：'禁食'，链接：'https://www.quran.com' },
{名称：'朝觐'，链接：'https://www.quran.com' },
];
var ItemModule=React.createClass({
getInitialState:函数（）{
返回{newName:this.props.name}
},
changeName（）{
log（'changed name'）；
this.setState（{newName:'lalala'}）；
},
render（）{
//
返回(

{this.state.newName}

);
}
});
var RepeatModule=React.createClass({
getInitialState:函数（）{
返回{items:[]}
},
render:function（）{
var listItems=this.props.items.map（函数（项）{
返回(
);
});
返回(
伊斯兰支柱

{listItems}

);
}
});
ReactDOM.render（，
document.getElementById（'react-content'）；

-更新- 小提琴版本16

更新了fidle，现在key出现了问题，而且onClick没有更新所有列表项的值。我做错什么了吗

-更新- 小提琴版本20

---

现在唯一的问题是，当我运行onClick的changeName时，

将所有列表项的名称更改为'lalala'。

我想你是想做

onClick={this.changeName}

---

按照您拥有它的方式，您在渲染时而不是单击时调用

changeName

函数。

我想您的意思是执行

onClick={this.changeName}

---

按照您拥有它的方式，您在渲染时而不是单击时调用

changeName

函数。

从中删除括号

onClick={this.changeName（）}

所以

onClick={this.changeName}

---

您希望调用onClick函数，但在render上以这种方式调用它

请从中删除括号

onClick={this.changeName（）}

所以

onClick={this.changeName}

---

你想调用onClick函数，但你是用那种方式在render上调用它的

我想你是想做

onClick={this.changeName}

我想你是想做

onClick={this.changeName}

你需要给key传递一个唯一的数字，通常的做法是传递当前迭代的索引我用小提琴演奏。在我添加了索引之后也是这样。思想？密钥必须放在包装容器上，ItemModule在一个div中，将密钥添加到div中，而不是您需要向密钥传递唯一的数字，通常的做法是传递当前迭代的索引。在我添加了索引之后也是这样。思想？密钥必须放在包装容器上，ItemModule在一个div中，将密钥添加到div中