javascript - 使用 ReactJS 和 Map 函数映射 ListItem

Question

我已经尝试了几种方法，但我似乎无法摆脱这个错误:预期 onClick 监听器是一个函数，而不是字符串类型

我有一个返回Panel Div 的函数。该函数工作正常，并且在浏览器中渲染没有问题，但仍然出现错误，提示我的按钮单击方法。

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

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 上的某个人可以帮助我确定如何消除此错误，即使它在两种返回的方法中都可以正常工作。

对此的任何帮助将不胜感激，我尝试了各种方法来消除该错误，但无济于事，我一无所获。

Answer 1

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

2. this.renderDivs 函数在哪里？