onClick 之后的渲染组件

Question

我想在单击按钮后呈现我的数据。 我在组件中使用条件渲染并在状态对象中创建一个布尔变量。 更改按钮单击变量后（如我所料）我的数据被渲染。 但什么也没有发生。 我知道这是一个基本错误。

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;

Answer 1

在 render 方法中不应有多个返回值。 而是试试这个：

注意： 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>
        }
    )
}

Answer 2

程序无法访问这部分代码，因为它位于return之后。 你不应该有两个回报。

if (this.state.isClicked){
   return (
      <div>
         <div>
            <AddComments 
               addcomments={this.state.addcomments} 
            />
         </div>
     </div>
   )
}

此外，您的条件语句不是有效的 JSX。 你的渲染方法应该是这样的

render() {
    return (
        <div>
           <div>
              <button onClick={() => this.sortBy()}>
                 AdditionalCommentaries
              </button>
           </div>
           {this.state.isClicked && (
              <div>
                 <div>
                    <AddComments 
                       addcomment={this.state.addcomments} 
                    />
                 </div>
              </div>
           )}
        </div>
    )
}

Answer 3

由于部分代码无法访问，您需要重构渲染方法，也不需要使用 IF 语句，您可以使用逻辑运算符&&来询问 isClicked 是否为 true 以返回AddComments组件。

您需要在代码编辑器中安装 eslinter，这可以帮助您检测此类错误或其他错误

渲染方法：

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>
);
}