javascript - 尝试使用来自子组件 2 的数据更新子组件 1，而不重新渲染子组件 2

问题描述

我正在从一个循环中生成一个沉重的 JSX 数组。它创建了很多表。我想用所选行上的数据更新徽章。但它会重新渲染我所有的表格。更新单个徽章相当长。useMemo()如果我的数据没有更改，我尝试使用它来阻止创建表，但是来自父级的回调函数不会更新状态。

我正在尝试做的代码示例=>

function App() {
    const [tableData, setTableData] = useState(null)
    const [badgeData, setBadgeData] = useState(null)
    const jsx = useMemo(() => createTable(tableData), [tableData])

    function updateBadge(selectedRows) {
        setBadgeData(addNewRow(selectedRows))
    }


    function createTable(data) {
        let jsx = []
        data.forEach((item) => {
            jsx.push(<TableComponent data={data.var} onRowSelect={updateBadge}/>)
        })
        return jsx;
    }

    return (
        <div>
            <HandleDataGeneration setData={setTableData}/>
            <MyBadgeComponent data={badgeData}/>
            {jsx}
        </div>
    );
}

在这种情况下，只有第一次调用 updateBadge 函数会重新渲染父级，而不是 nexts 调用（我猜这是因为我没有发送新的道具并且函数被复制而不是链接）

也许我的架构很糟糕，或者也许有一些解决方案可以在不重新渲染所有表格的情况下更新这个 badgeComponent。谢谢你的帮助

编辑：

表格组件

const TableCompoennt = React.memo((props) => { // after edit but it was a classic fn
    const classes = useStyles();
    const [expanded, setExpanded] = useState(props.data ? `panel${props.i}` : false);
    let disabled = false;

    const handleChange = (panel) => (event, isExpanded) => {
        setExpanded(isExpanded ? panel : false);
    };
    if (isNaN(props.data.var)) {
        props.data.var = x
    }
    if (!props.data)
        disabled = true;
    return (
        <ExpansionPanel TransitionProps={{ unmountOnExit: false }} expanded={expanded === `panel${props.i}`} onChange={handleChange(`panel${props.i}`)} disabled={disabled}>
            <ExpansionPanelSummary
                expandIcon={<ExpandMoreIcon/>}
                aria-controls="panel1bh-content"
                id="panel1bh-header"
            >
                <Tooltip title={props.data.var}>
                <Typography className={classes.heading}>{props.data.var}-{props.data.var}</Typography>
                </Tooltip>
                {!disabled ?
                    <Typography
                        className={classes.secondaryHeading}>{expanded ? "click to hide data" : "click to display data"}</Typography> :
                    <Typography
                        className={classes.secondaryHeading}>no data</Typography>
                }
            </ExpansionPanelSummary>
            <ExpansionPanelDetails>
                <MyTable data={props.data} var={props.var}
                         key={props.i} id={props.i}  style={{width: "100%"}} updateBadge={props.updateBadge}/>
            </ExpansionPanelDetails>
        </ExpansionPanel>
    )
})

我的表

export default React.memo((props) => { // same here
    const [open, setOpen] = useState(false);
    const [rowData, setRowData] = useState(null);
    const [rows, setRows] = useState(props.myRates);

    calcTotal(rows);
    useEffect(() => {
        setRows(props.myRates)
    }, [props]);

    return (
        <div style={{width: "100%"}}>
            {(rows && rows.length) &&
                <div style={{width: "100%"}}>
                    <Modal open={open} rowData={rowData} setRowData={setRowData}
                                setOpen={(value) => setOpen(value)}/>
                    <Paper style={{height: 400, width: '100%'}}>
                    <SimpleTable
                        columns={columns}
                        rows={rows}
                        handleRowClick={(row) =>{
                                setOpen(true);
                                setRowData(row);
                        }}
                        handleSelect={(row) => {
                            if (!row.selected)
                                row.selected = false;
                            row.selected = !row.selected;
                            props.updateBadge(row)
                    }}
                    />
                    </Paper>
                </div>}
        </div>
    );
})

简单表

const SimpleTable = React.memo((props) =>  {
    const classes = useStyles();
    let dataLabel = generateLabel(props.columns);

    function getRowData(row) {
        props.handleRowClick(row);
    }

    return (
        <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="simple table">
                <TableHead>
                    <TableRow>
                        {dataLabel}
                    </TableRow>
                </TableHead>
                <TableBody>
                    {props.rows.map((row) => (
                        <TableRow key={row.unique_code} selected={row.selected} hover onClick={() => {getRowData(row)}}>
                            {generateRow(props.columns, row)}
                            <TableCell onClick={(event) => {
                                event.stopPropagation();
                            }
                            }>
                                <Checkbox onClick={(event) => {
                                    event.stopPropagation();
                                    props.handleSelect(row);
                                }}
                                />
                            </TableCell>
                        </TableRow>
                    ))}

                </TableBody>
            </Table>
        </TableContainer>
    );
})

标签： javascriptreactjsreact-hooksrender

解决方案

除了在 App 组件中使用 useMemo 之外，您必须使用 React.memo 来TableComponent假设它是一个功能组件或者extend it with React.PureComponent如果它是一个类组件

但是在这种情况下，您必须确保您没有updateBadge在每次重新渲染时重新创建函数。为了确保这一点，请使用useCallback钩子

也不要忘记为从循环渲染的 TableComponent 实例添加一个唯一键

function App() {

    const [tableData, setTableData] = useState(null)
    const [badgeData, setBadgeData] = useState(null)

    const updateBadge = useCallback((selectedRows) {
        setBadgeData(addNewRow(selectedRows))
    }, []);

    return (
        <div>
            <HandleDataGeneration setData={setTableData}/>
            <MyBadgeComponent data={badgeData}/>
            {data.map((item) => {
                return <TableComponent key={item.id} props={item} onRowSelect={updateBadge}/>)
             })}
        </div>
    );

}

并在 TableComponent

const TableComponent = React.memo((props) => {
 // Rest of the TableComponent code
})

编辑：

根据您的评论代码框添加工作演示：https ://codesandbox.io/s/clever-fast-0cq32

变化不大

使用 useCallback 方法并将状态更新器转换为使用回调方法
删除了 JSON.parse 和 JSON.stringify 的逻辑，而是将整个数据存储在数组中。这样做的原因是每次你使用 JSON.parse 它都会返回一个新的对象引用，因此备忘录功能在子节点中失败，因为它只是进行引用检查。每次您的组件重新渲染时都会发生这种情况，即更新徽章状态时。
如果您仍然需要使用 JSON.parse 和 JSON.stringify，请添加一个自定义比较器来深入比较数据值

javascript - 尝试使用来自子组件 2 的数据更新子组件 1，而不重新渲染子组件 2

问题描述

解决方案

推荐阅读