使用 Redux 和 Hooks 的 React-grid-Layout答案

【问题标题】：React-grid-Layout with Redux and Hooks使用 Redux 和 Hooks 的 React-grid-Layout
【发布时间】：2020-01-30 17:55:29
【问题描述】：

我是 React 的初学者，我对 react-grid-layout 有疑问，事实上，我在减速器中创建了一个动作来重置我的卡片在我的网格中的位置。存储在“props”中的参数随我的意愿变化，但视觉渲染没有考虑到新参数，这是我的代码：

const DashboardGrid = (props) => {
    let [content, setContent] = useState();
    useEffect(() => {
        setContent(CreateContent(props));
    }, [props.newGrid])
    function CreateContent(props) {
        let dash = props.newGrid
        content = dash.map((_c, _i) => {
            if (dash[_i].isVisible === true) {
                return (
                    <div className='case' key={_i} cti={_i} data-grid={dash[_i].dataGrid}>
                        <Card id={_i} />
                    </div>
                )
            }
        })
        return content
    }
    function restore() {
        props.restoreGrid()
    }
    CreateContent(props)
    return (
        <GridLayout  className="layout" cols={props.cols} rowHeight={props.rowHeight} width={props.width}>
            <div key="title" data-grid={props.dashboards.dataGridTitle} className="dashTitle">{props.dashboards.title}</div>
                <div onClick={restore}>
                    <Icon type="undo" />
                    &nbsp;Restaurer la grille
                </div>
            {content}
        </GridLayout>
    )
}
const mapStateToProps = state => {
    return {
        newGrid: state.async.dashboards[0].dashboard,
        dashboards: state.async.dashboards[0]
    }
};
const mapDispatchToProps = dispatch => {
    return {
        restoreGrid: () => dispatch(cardAction.restoreGrid()),
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(DashboardGrid)

我的减速器在我的道具中向我发送了良好的坐标，但我的网格组件没有改变。请告诉我，否则我错了，或者是否有可能强制计算组件。

【问题讨论】：

也许我使用 useState 不好？我认为第二次渲染时卡片的参数没有被解释
我找到了一个解决方案，我为每个组件分配了一个键，并在我的网格上迭代每个动作，因此在考虑到附件的情况下，React 会销毁和重建其键被迭代的组件。跨度>

标签： reactjs redux react-hooks react-grid-layout

【解决方案1】：

我找到了一个解决方案，我为每个组件分配了一个键，并在我的网格上迭代每个动作，因此，其键被迭代的组件将被 React 销毁并重建，同时考虑到附件。

【讨论】：