使用 ReactJS 和 Map 函数映射 ListItem

Question

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

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

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

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 它使用：

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

如有任何帮助，我们将不胜感激，我尝试了各种方法来消除错误，但无济于事。

Answer 1

在您的代码中，onClick 处理程序应该是一个函数，在您的情况下它是 return 值 this.delete()。去掉括号。 ... onClick={this.delete}
this.renderDivs函数在哪里？

使用 ReactJS 和 Map 函数映射 ListItem

Map a ListItem using ReactJS and Map function

javascript

reactjs

jsx

react-dom