У меня есть страница компонента, на которой много переключателей с таблицей. Как это:
Я сделал это с помощью RadioButton Material UI и его компонента Table. Теперь он работает нормально, но проблема в том, что он мигает. Возможно, каждый раз, когда я нажимаю кнопку, он вычисляет предыдущее и последнее состояние и, наконец, повторно отображает всю страницу.
В типичном HTML я помню, что если я установил name элемента в то же самое, мне не нужны никакие опции, но в React, особенно этот пример, использовал this.setState(...) и каждое радио для checked = {this.state.selectedValue === 'value'},
Мне это кажется очень сложным, а самое печальное - медленным! Как я могу избежать повторного рендеринга всей страницы? или есть предложения новичку?
Мои фрагменты кода выглядят так, как показано ниже ...
<TableBody>
{SIM_INSTRUCTOR_ITEMS.map((el) => {
return (
el.list.map((item, index) => {
itemRows++
return (
<TableRow>
<TableCell>{item.content}</TableCell>
{item.possible.map(rating => {
let rowCount = itemRows-1;
return (
<TableCell key = {uuidv1()}
className = {[classes.cell, classes.cell_center]}>
<Radio
checked = {this.state.item_ratings[itemRows-1].ratingPoint == rating}
onChange = { (e) => this.handleRadioChange(e, rowCount)}
key = { 'radio-'+uuidv1() }
value = { rating }
name = "radio-button"
aria-label = { rating }
/>
</TableCell>
)
})}
</TableRow>
)
})
)
})}
</TableBody>
и я занимаюсь Радио сменой и таким состоянием.
handleRadioChange = (event, itemRows) => {
const items = this.state.item_ratings;
items[itemRows].ratingPoint = event.target.value;
this.setState({ items })
};
Как я могу предотвратить повторную визуализацию всей страницы при нажатии переключателя?
+) Я слышал, что setState сделал рендер страницы. Тогда как насчет использования redux? Если я использую redux, могу ли я предотвратить повторный рендеринг?





Я удалил uuid() из каждой строки таблицы и каждого повторяемого элемента, чтобы создать уникальный ключ.
и я перехожу к обновлению не всего массива, а элемента массива, используя immutable helper в реакции.
Теперь работает лучше.