Я пытаюсь отобразить конкретную кнопку чипа в зависимости от того, была ли она нажата или нет. Для этого я установил переменную в состоянии компонента, которая содержит все свойства кнопок. Однако мои операторы 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 было истинный, кнопка чипа отображалась бы иначе, чем если бы это было ложный. Прямо сейчас он не показывает кнопку с чипом, что бы то ни было.
Это хороший вопрос. Не работает с obj.id. Я пропускаю идентичную сетку просто ради тестирования, если что-то появляется на экране.
Что вы получите, если добавите следующую отладку this.state.columns.find (item => {console.info (item.id, typeof item.id) if (item.id === '1') {.. ..
нить. Он действительно входит в правильное состояние, он просто не возвращает видимый компонент
Разве вам не нужен еще один возврат перед this.state.columns.find (item => {... return this.state.columns.find (item => {
Добавлен ответ на основе приведенных выше комментариев.
Нет. Не получилось "бросило ожидаемое выражение"
Ах .. как я этого не видел. Вы используете поиск в рендере неверно. Find просто возвращает элемент, который соответствует условию. Обновленный ответ





Целый
<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 относится к столбцам таблицы, которые я хочу показать / скрыть. Чип просто покажет, отображается ли столбец или скрыт, поэтому он должен быть видимым всегда.
Вы используете поиск в рендере неверно. Find просто возвращает элемент, который соответствует условию.
например
var found = items.find(function(item) {
return item > 10;
})
Вместо этого используйте карту
this.state.columns.map(item => {
if (item.id === '1'){
return (<div> Inside </div>)
}
})
Почему вы передаете одну и ту же / идентичную сетку / чип в оба тройных варианта? также почему имя свойства переменной состояния отличается в setState - obj._id. Почему подчеркивание?