Question

我尝试了几种方法，但我似乎无法摆脱这个错误：Expected onClick listener to be a function, instead got type string

我有一个返回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

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

使用ReactJS和Map函数映射ListItem

1 个答案: