使用 ReactJS 和 Map 函数映射 ListItem
Map a ListItem using ReactJS and Map function
我已经尝试了几种方法,但我似乎无法摆脱这个错误: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: </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>
<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 方法中都可以正常工作。
如有任何帮助,我们将不胜感激,我尝试了各种方法来消除错误,但无济于事。
在您的代码中,onClick 处理程序应该是一个函数,在您的情况下它是 return 值 this.delete()
。去掉括号。 ... onClick={this.delete}
this.renderDivs
函数在哪里?
我已经尝试了几种方法,但我似乎无法摆脱这个错误: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: </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>
<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 方法中都可以正常工作。
如有任何帮助,我们将不胜感激,我尝试了各种方法来消除错误,但无济于事。
在您的代码中,onClick 处理程序应该是一个函数,在您的情况下它是 return 值
this.delete()
。去掉括号。... onClick={this.delete}
this.renderDivs
函数在哪里?