[英]Rendering component after onClick
I want to render my data after button click.我想在单击按钮后呈现我的数据。 I use the condition rendering in my component and create a boolean variable in state object.
我在组件中使用条件渲染并在状态对象中创建一个布尔变量。 After button clicked variable is changed and (as I expected) my data was renderered.
更改按钮单击变量后(如我所料)我的数据被渲染。 But nothing happens.
但什么也没有发生。 I know that this is a basic mistake.
我知道这是一个基本错误。
class SortingMyArray extends React.Component {
constructor(props) {
super(props)
this.state = {
addcomments: addcomments,
isClicked : false
}
// this.sortBy = this.sortBy.bind(this)
}
sortBy() {
let sortedComments = [...this.state.addcomments].sort((a,b) => new Date(b.date) - new Date(a.date));
this.setState({
addcomments: sortedComments,
isClicked : true
})
console.log(this.state.isClicked)
}
render(){
return(
<div>
<div>
<button
onClick={() => this.sortBy() }>AdditionalCommentaries
</button>
</div>
</div>
)
if (this.state.isClicked){
return(
<div>
<div>
<AddComments addcomments = {this.state.addcomments} />
</div>
</div>
)
}
}
}
export default SortingMyArray;
You should not have more than one return inside render method.在 render 方法中不应有多个返回值。 Instead try this:
而是试试这个:
Note: There is no if-else statement in JSX but we use the one bellow注意: JSX 中没有 if-else 语句,但我们使用了下面的语句
render(){
return(
<div>
<div>
<button
onClick={() => this.sortBy() }>AdditionalCommentaries
</button>
</div>
</div>
{
this.state.isClicked
&&
<div>
<div>
<AddComments addcomments = {this.state.addcomments} />
</div>
</div>
}
)
}
This part of your code is unreachable by the program since it is placed after return
.程序无法访问这部分代码,因为它位于
return
之后。 You should not have two returns.你不应该有两个回报。
if (this.state.isClicked){
return (
<div>
<div>
<AddComments
addcomments={this.state.addcomments}
/>
</div>
</div>
)
}
Also, your conditional statement is not valid JSX.此外,您的条件语句不是有效的 JSX。 Your render method should look something like this
你的渲染方法应该是这样的
render() {
return (
<div>
<div>
<button onClick={() => this.sortBy()}>
AdditionalCommentaries
</button>
</div>
{this.state.isClicked && (
<div>
<div>
<AddComments
addcomment={this.state.addcomments}
/>
</div>
</div>
)}
</div>
)
}
You need to restructure your render method since part of code is unreachable, also you don't need to use IF sentence, you can use logical operator && to ask if isClicked is true to return AddComments component.由于部分代码无法访问,您需要重构渲染方法,也不需要使用 IF 语句,您可以使用逻辑运算符&&来询问 isClicked 是否为 true 以返回AddComments组件。
You need to install eslinter in your code editor, this can you help to detect this type errors or others
您需要在代码编辑器中安装 eslinter,这可以帮助您检测此类错误或其他错误
RENDER METHOD:渲染方法:
render() {
//You can destructuring object, in this case your state is the object
const { isClicked, addcomments } = this.state;
return (
<div>
<div>
<button onClick={() => this.sortBy()}>AdditionalCommentaries</button>
</div>
{isClicked && (
<div>
<AddComments addcomments={addcomments} />
</div>
)}
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.