为什么处理程序调用 render 方法 3 次？

Question

我正在与 Semantic-ui 合作，并且有这样的组件列表项目。每个项目都有一组复选框：

import React, { Component }            from 'react'
import { Divider,Label,List,Checkbox,Header } from 'semantic-ui-react'


export default class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checkboxes: []
        }
    }

    render() {
        let { tags } = this.props;

        return (
            <div className="ui segment basic" >
                {typeof tags === "undefined" ?
                    <div>Select partner and process</div>
                :
                    this.getTagListItems(tags)
                }
            </div>
        )
    }

    getTagListItems = tagsData => {
        let tags = [];
        for(let i=0; i<tagsData.length; i++){
            if ( tagsData[i].children.length !==0 ) {
                tags.push(
                    <div className="container"  key = { i }>
                        <Header as="h3">{ tagsData[i].name }</Header>
                        <Divider/>
                        <List>
                            {this.getTagCheckboxes(tagsData[i].children)}
                        </List>
                    </div>
                );
            }
        }
        return tags;
    };

    getTagCheckboxes = checkboxData => {
        let checkboxes = [];
        for(let i=0; i<checkboxData.length; i++) {
            checkboxes.push(
                <List.Item key = { checkboxData[i].id }>
                    <Checkbox label   = { checkboxData[i].name }
                              id      = { checkboxData[i].id }
                              onClick = { this.setCheckbox }
                              // checked = { this.state.data.id === checkboxData[i].id }
                    />
                    <List.Content floated="right" >
                        <Label>
                            0
                        </Label>
                    </List.Content>
                </List.Item>
            );
        }
        return checkboxes;
    };

    setCheckbox = (e, itemData) => {
        let { checkboxes } = this.state;
        console.log('ITEMM!!!', itemData)
    }
}

如何在我设置的每个复选框上看到它 onClick，调用 setCheckbox。当我只选中 1 个复选框时，它调用 setCheckbox 3 次，我进入控制台 console.log 3 次。怎么了，我怎样才能更正它以使 setCheckbox 每 1 次检查仅工作 1 次？

Answer 1

问题出在 onClick 上。我将其更改为 onChange()，现在可以使用了

为什么处理程序调用 render 方法 3 次？

Why handler calls render method 3 times?

reactjs

semantic-ui-react