Кнопка чипа не отображается при создании условного метода внутренней отрисовки

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

Каждый элемент переменной состояния столбца является состоянием кнопки микросхемы

Чтобы попытаться заставить его работать, я использовал этот код в render ():

 {
    this.state.columns.find(item => {
       if (item.id === '1'){
         return item.show === true ? (
              <Grid item className = {classes.chipWrapper}>
               <Chip
               label='Chip 1'
               color = "secondary"
               deleteIcon = {<DoneIcon />} 
               id='1'
               onClick = {this.handleChip}
               />
             </Grid>
              ) : (
             <Grid item className = {classes.chipWrapper}>
               <Chip
               label='Chip 1'
               color = "secondary"
               deleteIcon = {<DoneIcon />} 
               id='1'
               onClick = {this.handleChip}
               />
             </Grid>
         )
       }
    })
  }

Вот что у меня есть в остальной части кода:

class ChipFilter extends React.Component {
  state = {
    anchorEl: null,
    columns: [
      {id: "1", show: false}
    ]
 };

//simply change the property "show" of the column chosen
handleChip = (e) => {
    this.setState(prevState => ({
      columns: prevState.columns.map(
      obj => (obj._id === e.currentTarget.id ? Object.assign(obj, { show: true }) : obj)
    )
   }));
}

Я ожидал, что кнопка чипа будет отображаться на экране независимо от свойства show, однако с разными стилями дизайна, применяемыми в пользовательском интерфейсе материала. Если бы show было истинный, кнопка чипа отображалась бы иначе, чем если бы это было ложный. Прямо сейчас он не показывает кнопку с чипом, что бы то ни было.

Почему вы передаете одну и ту же / идентичную сетку / чип в оба тройных варианта? также почему имя свойства переменной состояния отличается в setState - obj._id. Почему подчеркивание?

varoons 27.12.2018 18:26

Это хороший вопрос. Не работает с obj.id. Я пропускаю идентичную сетку просто ради тестирования, если что-то появляется на экране.

Jeff Goes 27.12.2018 19:03

Что вы получите, если добавите следующую отладку this.state.columns.find (item => {console.info (item.id, typeof item.id) if (item.id === '1') {.. ..

varoons 27.12.2018 19:08

нить. Он действительно входит в правильное состояние, он просто не возвращает видимый компонент

Jeff Goes 27.12.2018 19:15

Разве вам не нужен еще один возврат перед this.state.columns.find (item => {... return this.state.columns.find (item => {

varoons 27.12.2018 19:16

Добавлен ответ на основе приведенных выше комментариев.

varoons 27.12.2018 19:20

Нет. Не получилось "бросило ожидаемое выражение"

Jeff Goes 27.12.2018 19:50

Ах .. как я этого не видел. Вы используете поиск в рендере неверно. Find просто возвращает элемент, который соответствует условию. Обновленный ответ

varoons 27.12.2018 19:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
8
405
2

Ответы 2

Целый

 <Grid item className = {classes.chipWrapper}>
               <Chip
               label='Chip 1'
               color = "secondary"
               deleteIcon = {<DoneIcon />} 
               id='1'
               onClick = {this.handleChip}
               />
 </Grid>

передается как третье подлежащее тернарного оператора при условии

item.show === true

поэтому на видимость <Chip /> в настоящее время влияет свойство показывать.

но свойство show не распространяется на чип. предполагается, что чип будет отображаться независимо от свойства шоу. свойство show относится к столбцам таблицы, которые я хочу показать / скрыть. Чип просто покажет, отображается ли столбец или скрыт, поэтому он должен быть видимым всегда.

Jeff Goes 27.12.2018 19:06

Вы используете поиск в рендере неверно. Find просто возвращает элемент, который соответствует условию.

например

 var found = items.find(function(item) {
   return item > 10;
 })

Вместо этого используйте карту

 this.state.columns.map(item => {
   if (item.id === '1'){
     return (<div> Inside </div>)
   }
 })

Другие вопросы по теме