Список дочерних компонентов не отображается

71
7

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

Фрагмент в компоненте PropertyBar:

updateSelectedCell() {
if (graph.selectedCell != null) {
this.setState({
selectedCell: graph.selectedCell,
cellProperties: Array.from(graph.selectedCell.value.attributes)
});
}
}

renderPropertyList() {
this.state.cellProperties.map(key => {
<PropertyBarItem name={key.nodeName} value={key.nodeValue} />
})
}

render() {
if (this.state.selectedCell != null) {
return (
<div>
<Button variant="contained" color="primary" fullWidth={true} onClick={() => this.updateSelectedCell()}> View properties </Button>
<List>
{this.renderPropertyList}
</List>
</div>
)
}
return (
<div>
<Button variant="contained" color="primary" fullWidth={true} onClick={() => this.updateSelectedCell()}> View properties </Button>
<List>
<p>Click on a cell to view its properties.</p>
</List>
</div>
)
}

Когда пользователь нажимает кнопку, он обновляет состояние с помощью массива, а затем должен отображать список PropertyBarItem с ключами внутри массива. Он не показывает ничего, но не падает. Тестирование с использованием простого p-тега, а также ничего не отображает:

renderPropertyList() {
this.state.cellProperties.map(key => {
<p> {key} </p>
})
}

спросил(а) 2018-08-13T23:57:00+03:00 2 года, 2 месяца назад
1
Решение
70

Вы не вызываете метод renderPropertyList. Добавьте () чтобы вызвать его.

<div>
<Button
variant="contained"
color="primary"
fullWidth={true}
onClick={() => this.updateSelectedCell()}
>
View properties
</Button>
<List>{this.renderPropertyList()}</List>
</div>

Вы также должны вернуть результат из renderPropertyList и вернуть JSX из функции, указанной на map.

renderPropertyList() {
return this.state.cellProperties.map(key => {
return <PropertyBarItem name={key.nodeName} value={key.nodeValue} />
})
}

ответил(а) 2018-08-13T23:59:00+03:00 2 года, 2 месяца назад
57

У вас отсутствует оператор return:

renderPropertyList() {
return this.state.cellProperties.map(key => {
<PropertyBarItem name={key.nodeName} value={key.nodeValue} />
})
}

Кроме того, обязательно вызовите метод:

 if (this.state.selectedCell != null) {
return (
<div>
<Button variant="contained" color="primary" fullWidth={true} onClick={() => this.updateSelectedCell()}> View properties </Button>
<List>
{this.renderPropertyList()}
</List>
</div>
)
}

ответил(а) 2018-08-13T23:59:00+03:00 2 года, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема