Question

我有一个组件页面，其中有许多单选按钮与表格组合在一起。像这样：

我使用Material UI的RadioButton及其Table组件进行了此操作。它现在运作良好，但问题是它眨眼了。也许每当我按下按钮时，它会计算前一个状态和最新状态，最后重新渲染整个页面。

在典型的HTML中，我记得如果我将name元素设置为相同，我就不需要任何选项，但在In React中，尤其是this example使用了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>

我处理Radio Change并像这样陈述。

handleRadioChange = (event, itemRows) => {
    const items = this.state.item_ratings;
    items[itemRows].ratingPoint = event.target.value;
    this.setState({ items })
};

当我点击单选按钮时，如何防止重新呈现整页？

+）我听说setState制作了重新渲染页面。那么使用redux怎么样？如果我使用redux，我可以阻止重新渲染吗？

Answer 1

我删除了uuid()到每个表行，每个迭代元素都创建了唯一键。

我改为使用immutable helper在react中更新不是整个数组而是更新数组元素。

现在效果更好。

将RadioGroup反应到表格单元格

1 个答案: