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