Рендеринг компонента после onClick - PullRequest
Новая
       5

Рендеринг компонента после onClick

1 голос
/ 23 марта 2020

Я хочу сделать мои данные после нажатия кнопки. Я использую условие рендеринга в своем компоненте и создаю логическую переменную в объекте состояния. После нажатия кнопки переменная изменяется и (как я и ожидал) мои данные были обработаны. Но ничего не происходит. Я знаю, что это базовая ошибка c. 

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;

Ответы [ 3 ]

0 голосов
/ 23 марта 2020

Эта часть вашего кода недоступна программе, так как она находится после 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>
    )
}
0 голосов
/ 23 марта 2020

Вам необходимо реструктурировать свой метод render , так как часть кода недоступна, также вам не нужно использовать предложение IF, вы можете использовать логический оператор && , чтобы спросить, является ли isClicked верным, чтобы возвратить AddComments компонент.

Вам необходимо установить eslinter в вашем редакторе кода, это может помочь вам обнаружить ошибки этого типа или другие

enter image description here

МЕТОД ПОДАЧИ: 

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>
);
}
0 голосов
/ 23 марта 2020

Вы не должны иметь более одного возврата в методе рендеринга. Попробуйте вместо этого:

Примечание: В 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>
        }
    )
}
...