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

由于部分代码不可访问，因此您需要重组 render 方法，也不需要使用IF语句，可以使用logical operator && 询问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>
);
}

onClick之后的渲染组件

3 个答案: