Реагировать на RadioGroup в ячейку таблицы

У меня есть страница компонента, на которой много переключателей с таблицей. Как это:

Реагировать на RadioGroup в ячейку таблицы

Я сделал это с помощью 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, могу ли я предотвратить повторный рендеринг?

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

Ответы 1

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

и я перехожу к обновлению не всего массива, а элемента массива, используя immutable helper в реакции.

Теперь работает лучше.

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