即使在数据源更新后子组件状态也未更新（包含图表）

Question

我正在尝试构建一个反应网格组件，其设计类似于图像中所示的设计。

（1）有人将原始数据作为道具传递给网格，（2）将其转换为多个GridData对象并存储在GRID中。 （3）在werkzeug函数中迭代这些对象以渲染网格项。 （4）现在，有人在网格之外执行一个动作（可能在工具栏或其他东西中），触发存储在Grid中的一些/所有GridData对象的属性更改（在本例中为render）。 （5）这导致所有网格项都获得更新属性（在这种情况下，将选择所有项）。

但是，当我更新Grid中对象的属性时，子（GridItem）不会选中该复选框。我该如何解决这个问题？

设计代码如下所示：

的 Grid.js

select all

的 GridItem.js

class Grid extends Component {
    constructor(props) {
        super(props);
        this.state = {
            gridData: props.data,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            gridData:
                typeof nextProps.gridData !== 'undefined' && nextProps.gridData
                    ? nextProps.gridData
                    : this.state.gridData,
        });
    }

    // PubSub System to receive notification
    subscriber(msg, data) {
        if(msg === 'SELECT_ALL_ITEMS'){
            this.state.gridData.forEach(gridItem => {
            gridItem.setChecked(true);
        }
    }

    renderGridItem(gridItem) {
        return (
            <GridItem
                key={gridItem.getItemId()}
                title={gridItem.getTitle()}
                isChecked={gridItem.isChecked()}
            />
        );
    }

    render() {
        return (
            <div>
            {this.state.gridData !== 'undefined' && this.state.gridData ? (
                this.state.gridData.map(gridItem => this.renderGridItem(gridItem))
            ) : (
                <div />
            )}
            </div>
        );
    }
}

的 GridData.js

class GridItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isChecked: typeof props.isChecked !== 'undefined' && props.isChecked ? props.isChecked : false,
                title: typeof props.title !== 'undefined' && props.title ? props.title : '',
            },
        };
    }

    render() {
        const { classes } = this.props;
        return (
            <div>
                    <Checkbox
                        checked={this.state.isChecked}
                    />
                    {this.state.properties.title}
            </div>
        );
    }
}

Answer 1

我认为您需要将订阅者置于componentDidMount

  

此方法是设置任何订阅的好地方。如果您这样做，请不要忘记取消订阅componentWillUnmount（）

您必须在订阅者中使用setState更新状态。

在componentDidMount方法中调用setState（）将触发额外的渲染