我有一个票证列表,我需要为每个票证添加一个隐藏按钮,我还创建了一个隐藏票证数组,因此当我隐藏票证时,票证将插入其中,并将从显示的第一个数组中删除屏幕上的所有票。 当我至少有一张票证被隐藏时,会出现一个新的“恢复”按钮,它需要给我一个还原所有内容的选项,它还会打印出现在隐藏了多少张票证。 所以我在状态中添加了一个remove:布尔值,并尝试根据此条件进行过滤,但是在handleclickHide和handleclickShow函数上以及在创建hiddenTickets数组上有很多错误,我不明白为什么吗?这是一些代码:
export type AppState = {
tickets?: Ticket[],allTickets?: Ticket[],HiddenTickets?: Ticket[],remove?: boolean,search: string;
}
export class App extends React.PureComponent<{},AppState> {
state: AppState = {
search: '',remove:false
}
async componentDidmount() {
this.setState({
tickets: await api.getTickets()
});
(hiddenTickets: Ticket[])=>{
const hidden = hiddenTickets
.filter((t) => ((t: { title: any; })=>t.title!==t));
}
}
handleclickHide=(ticket)=> {
ticket.preventDefault();
ticket.remove=true;
this.setState({HiddenTickets:[ticket,...this.state.HiddenTickets]});
this.state.filteredTicket=this.state.filteredTicket.filter(ticket=>!ticket.remove});
const hiddenCount=this.state.HiddenTickets.length();
<div>
<button onClick={this.handleclickShow}>restore</button>
<div hiddenCount> hidden tickets</div>
</div>
};
handleclickShow=()=>{
ticket.remove=false;
this.setState({HiddenTickets:[]});
this.setState({filteredTickets=tickets.filter((t)=>(t.title.toLowerCase() + t.content.toLowerCase()).includes(this.state.search.toLowerCase())});
this.state.HiddenTickets.pop());
};
renderTickets = (tickets: Ticket[]) => {
const filteredTickets = tickets
.filter((t) => (t.title.toLowerCase() + t.content.toLowerCase()).includes(this.state.search.toLowerCase()));
return (<ul classname='tickets'>
{filteredTickets.map((ticket) => (<li key={ticket.id} classname='ticket'>
<div style={{display:"flex",justifyContent: 'center'}}>
<button onClick={this.handleclickHide}>hide
</button>
</div>
<h5 classname='title'>{ticket.title}</h5>
<div classname='content'>{ticket.content.toLocaleString()}</div>
<footer>
<div classname='meta-data'>By {ticket.userEmail} | { new Date(ticket.creationTime).toLocaleString()}</div>
</footer>
</li>))}
</ul>);
}
render() {
const {tickets} = this.state;
return (
<main>
<h1>Tickets List</h1>
<header>
<input type="search" placeholder="Search..." onChange={(e) => this.onSearch(e.target.value)}/>
</header>
{tickets ? <div classname='results'>Showing {tickets.length} results</div> : null }
{tickets ? this.renderTickets(tickets) : <h2>Loading..</h2>}
</main>
)
}
}
export default App;
非常感谢您的帮助