Отображение компонента после оператора if в отдельной функции (React)

Question

У меня есть раскрывающееся окно поиска, которое я хочу использовать для отображения результатов, и у меня есть компонент карты, который я хочу отобразить, когда раскрывающееся значение соответствует значению пользователя, для которого предназначен компонент карты.

Я извлек состояние пользователя из реквизита и сравнил его с состоянием выпадающего списка, чтобы создать функцию onSearchSubmit для отображения компонента карты «ProfileCard».

При тестировании функции onSearchSubmitиспользуя console.log, оператор if равен true, однако компонент ProfileCard не отображается.Там нет ошибок, я просто не вижу, отображается мой компонент.

Любая помощь будет принята с благодарностью.Это мой первый вопрос, поэтому если мне не хватит информации, я постараюсь помочь, насколько смогу.

Пожалуйста, смотрите код ниже.(Я пропустил разделы кода, которые, как мне кажется, не связаны с этим разделом).

onSearchSubmit = () => {
    if (this.state.selectedCategory === this.props.category) {
        console.log('it works')
        return ( <ProfileCard/> );
    } else {
        console.log('not working')
    }
}

render() {
    return (<div>
        <button onClick = {
            this.onSearchSubmit
        }> Search</button> 
        </div>
    )
}

Спасибо,

Джон

Answer 1

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

onSearchSubmit = () => {
  if (this.state.selectedCategory === this.props.category) {
    console.log('it works')
    this.setState({
      renderProfileCard: true
    })
  } else { console.log('not working') }
}

render() {
  return (
    <div>
      <button onClick={this.onSearchSubmit}>Search</button>
      {this.state.renderProfileCard && <ProfileCard />}
    </div>
  )
}  

Добавьте renderProfile флаг в ваш штат.

this.state = {
  renderProfileCard: false
}

Answer 2

Вы должны вернуть компонент внутри самого обработчика рендера:

render() {
 return (
   <div>
     <button onClick={this.onSearchSubmit}>Search</button>
     {
       this.state.selectedCategory === this.props.category &&
       <ProfileCard /> || null
     }
   </div>
  )
}

Если вы хотите выполнить рендеринг извне, я бы посоветовал вам взглянуть на другой мой пост Самый эффективный способ рендеринга элемента JSX .