使用ReactJS映射一个列表项和地图功能

我已经试过这几种方法，但我似乎无法摆脱这种错误的：Expected onClick listener to be a function, instead got type string使用ReactJS映射一个列表项和地图功能

我有一个返回面板事业部的功能。该功能工作正常，并在浏览器中呈现没有问题，但抱怨我的按钮点击方法仍然存在错误。

我只是映射的状态，并将其返回到我的输出

this.setState({divs: [...this.state.divs, {title: this.state.newTitle, 
description: this.state.newDescription, time: timeNow, date: dateNow}]});

然后在我的方法我创建阵列出来的状态的对象。

renderTheDiv =() => { 

    var panelMap = [div]; 

    const newGeneratedPanel = panelMap.map((data, x) => 
      <div id="newpanel" className="panel" key={x}> 
      <label>Created:&nbsp;</label> 
      <span className="date">{data.date}</span> at 
      <span className="date">{data.time}</span> 
      <div className="itemTitle">{data.title}</div> 
      <br/> 
      <div className="itemDescription">{data.description}</div> 
      <button type="button" 
      className="editButton btn btn-default">Edit</button>&nbsp; 
      <button type="button" className="deleteButton btn btn-danger" 
      onClick={this.delete()}>Delete</button> 
      <div id="updated"></div></div>); 

     return newGeneratedPanel; 

    }

我试着用返回它：

return newGeneratedPanel;

这是错误：

也

return (<div>{newGeneratedPanel}</div>); // this one generates an 
     error complaining about needing a key even though it is clearly set

这是错误：

我使用调用它在我的渲染功能：{this.state.divs.map(this.renderDivs)}

面板DIV显示没有问题，工作正常，但错误在我的控制台仍然存在。我不想忽视它。我希望Stack上的某个人可以帮助我确定如何摆脱这个错误，即使它在两种返回的方法中都能正常工作。

任何与此有关的帮助将不胜感激，我已尝试各种方法来摆脱错误，并无济于事，我已经得不到任何地方。

来源

2017-07-19 MizAkita

在你的代码中，onClick处理程序应该是一个函数，在你的情况下它的返回值是this.delete()。删除括号。 ... onClick={this.delete}
this.renderDivs功能在哪里？

来源

2017-07-19 22:49:28 webdeb

看起来像你的权利......一旦我改变了onClick删除引用错误消失。愚蠢的我......简单的东西让我难住。谢谢@webdeb – MizAkita

不错，很乐意帮忙！ – webdeb

使用ReactJS映射一个列表项和地图功能

回答

相关问题