使用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映射一個列表項和地圖功能

回答

相關問題