Javascript 使用onClick时反应渲染

想知道是否有方法可以在不使用构造函数的情况下呈现组件

下面是我的onClick代码。我的目标是在单击按钮时进行渲染，使按钮消失。 我不确定是否有办法在不创建

 constructor(props) {
        super(props);
        this.state = {}
 }






 <div>
    <h1>Title: {post.title}</h1>
    <h2>Pages: {post.pages}</h2>
    <div>Reviews:</div>
    <button 
        onClick={() => { this.props.addToMyPage(
              {
                  userId: user.user.user_id, 
                  bookId: post.book_id
              }
         )}}>
         Add this to my page
    </button>
 </div>
)

构造函数（道具）{
超级（道具）；
this.state={}
}
标题：{post.Title}
页面：{post.Pages}
审查：
{this.props.addToMyPage(
{
userId:user.user.user\u id，
bookId:post.book\u id
}
)}}>
将此添加到我的页面
)

d

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../actions/index”导入{selectBook}；
从“../actions/index”导入{addToMyPage}；
从“反应路由器”导入{Link}；
从“../actions/index.js”导入{selectUser}；
从“../actions/index”导入{getBooks}；
从“lodash”进口；
类BookDetails扩展组件{
建造师（道具）{
超级（道具）；
此.state={
秀：真的
};
}    
组件willmount（）{
this.props.selectBook（this.props.params.id）
if（this.props.user）{
this.props.selectUser（this.props.user.user.user\u id）；
}
否则{
this.props.selectBook（this.props.params.id）；
}
}
renderList（）{
常量=[]；
const urlId=parseInt（this.props.params.id）；
this.props.list.forEach（（list）=>{
console.log（“list”，list.book_id）；
log（“params”，this.props.params.id）
if（list.book_id===urlId）{
console.log（“真”）；
推({
图书：list.book\u id
})
}
})
返回元素；
}
render（）{
const{post}=this.props；
const{user}=this.props；
const{list}=this.props；
const renderList=this.renderList（）；
const urlId=parseInt（this.props.params.id）；
如果（！post）{
返回加载。。。
}
if（用户和列表）{
if（urlId====（renderList，[0].book'））{
返回(
标题：{post.Title}
页面：{post.Pages}
审查：
)
}
否则{
返回(
标题：{post.Title}
页面：{post.Pages}
审查：
{this.state.show&&{this.setState（{show:false}，this.props.addToMyPage(
{
userId:user.user.user\u id，
bookId:post.book\u id
}
))}}>
将此添加到我的页面
)
}
}
否则{
返回(
标题：{post.Title}
页面：{post.Pages}
审查：
)
}
}
}
函数MapStateTops（状态）{
返回{
帖子：state.books.post，
用户：state.user.post，
列表：state.list.all
}
}
导出默认连接（mapStateToProps，{selectBook，addToMyPage，getBooks，selectUser}）（BookDetails）；

您可以根据功能状态轻松显示按钮：

this.state = {
    show: true
};

====

....
{this.state.show&&{this.props.addToMyPage(
{
userId:user.user.user\u id，
bookId:post.book\u id
}
)；this.setState（{show:false}}}>
将此添加到我的页面
}
...

---

单击按钮后-将状态更改为

show:false

，这将导致按钮从DOM中删除。

我已更新了我的代码，但控制台中出现错误enqueueCallback（…）。不完全确定它抛出此错误的原因。当您在没有setState的情况下运行它时，您不会得到错误吗？另一个选项-您可以在

setState

调用之外调用

addToMyPage

函数，因为我不确定这个函数到底做了什么（它可能会干扰当前对象）。是的，当我没有执行setState时，它没有抛出错误。很抱歉，这是一个非常新的编码，我不知道在setState之外调用addToMyPage函数是什么意思。啊，明白了。现在一切正常，不会出现错误。谢谢你的帮助。

this.state = {
    show: true
};

<div>
....
{this.state.show && <button 
    onClick={() => { this.props.addToMyPage(
          {
              userId: user.user.user_id, 
              bookId: post.book_id
          }
     ); this.setState({show:false})}}>
     Add this to my page
</button>
}
...
</div>