React钩子呈现的钩子比上一次呈现时多

Question

一个组件，它呈现已填好的表单的预览，当您单击左侧的表单时，它会在右侧显示它们。

第一个handleSwitchReview向我抛出了React钩子，所呈现的钩子比上一个呈现错误时要多

第二个不是。当我控制台日志道具，例如，我得到他们4-5次时，第一个函数的视图显示，但没有第二次，第二次只显示1次在控制台日志。

尝试移动setState并在控制台中记录父组件，但这个组件是唯一一个启动了很多次并中断的组件，也许我对如何构造它没有一个明确的理解。

null

const SimpleFormPreview = (props) => {
    //Deconstructing Props
    const { childAndButtonWithStylesForPreview } = props;

    //Setting State
    const [child, setChild] = useState({
        childToDisplay: childAndButtonWithStylesForPreview ? childAndButtonWithStylesForPreview[0].child : {}
    });

    //Deconstructing State
    const { childToDisplay } = child;

    const handleSwitchReview = (childWithIconArr) => {
        setChild({ childToDisplay: childWithIconArr.child });
    };

    const renderPreview = () => {
        if (childToDisplay.hasOwnProperty('schema')) {
            return <SimpleFormView children={undefined} schema={childToDisplay.schema} onValChange={{}} onSatisfiedOrPercentageChange={{}} vals={{}} existingLookupOriginalVals={{}} nonStandardKeysInPropInfo={{}} satisfiedOverrides={{}} />;
        } else {
            var reviewItems = _.map(childToDisplay, function (val, key) {
                console.log('here', val, key);
                if (!key.startsWith('customer') && (key.startsWith('custom') || key.endsWith('Cost'))) {
                    //skip rendering these
                    //they will be attached to the main settings rendering below
                    return null;
                } else {
                    if (key === '_id' || key === 'id') {
                        return null;
                    }

                    var costEl;
                    var customEl;

                    _.each(childToDisplay, function (customOrCostVal, customOrCostKey) {
                        if (customOrCostKey === 'custom' + key) {
                            customEl = (
                                <div
                                    style={{
                                        display: 'inline-block',
                                        marginLeft: 5,
                                        color: 'rgb(222, 222, 0)'
                                    }}>
                                    {'Customized to ' + customOrCostVal.toString()}
                                </div>
                            );
                        }

                        if (customOrCostKey === key + 'Cost') {
                            costEl = (
                                <div
                                    style={{
                                        display: 'inline-block',
                                        color: 'rgba(39, 204, 39, 0.52)',
                                        marginRight: 20
                                    }}>
                                    {'+ $' + customOrCostVal.val}
                                </div>
                            );

                            totalAdditionalCost = totalAdditionalCost + customOrCostVal.val;
                        }
                    });
                    return (
                        <div key={key}>
                            {costEl}
                            <div style={{ display: 'inline-block', marginLeft: 5 }}>{key.toString()}</div>:<div style={{ display: 'inline-block', marginLeft: 5 }}>{val.toString()}</div>
                            {customEl}
                        </div>
                    );
                }
            });
            return reviewItems;
        }
    };

    return (
        <Grid container direction='column' justify='flex-start' spacing={0}>
            <Grid item xs={12}>
                <Grid container wrap='wrap' spacing={0}>
                    <Grid style={{ position: 'fixed', width: 100 }} container direction='column'>
                        <div style={{ marginLeft: 'auto', height: 447, overflowY: 'scroll', direction: 'rtl', background: 'transparent' }}>
                            {_.map(childAndButtonWithStylesForPreview, function (childObj, idx) {
                                var innerIconElText = '';
                                // if ((idx + 1) > 99) {
                                //     innerIconElText = '...' + (idx + 1)
                                // } else {
                                //     innerIconElText = idx + 1
                                // }
                                if (childObj.iconEl) {
                                    childObj.iconEl.props.style.boxShadow = childToDisplay.id === childObj.child.id ? 'green 0px 0px 33px 5px' : null;
                                    return <div onClick={() => handleSwitchReview(childObj)} key={idx}>{childObj.iconEl}</div>;
                                } else {
                                    return (
                                        <Button style={{ boxShadow: childToDisplay.id === childObj.child.id ? 'green 0px 0px 33px 5px' : null, height: 100, margin: '25px', borderRadius: 60 }} key={idx} onClick={() => handleSwitchReview(childObj)}>
                                            <span id='defaultChildIcon' style={{ position: 'relative' }}></span>
                                            <span style={{ marginLeft: 22, marginTop: 10, fontSize: 12, position: 'absolute' }}>{innerIconElText}</span>
                                        </Button>
                                    );
                                }
                            })}
                        </div>
                    </Grid>
                    <Grid id={'simpleForm'} style={{ height: '100%', width: '100%', overflow: 'auto' }} container>
                        <Paper style={{ marginTop: '25px', marginLeft: '165px', padding: '15px', width: '80%' }} elevation={24}>
                            hello
                            <div style={{ float: 'right' }}>
                                <Button id='localSaveBtn' onClick={() => handleSave(document.querySelector('#simpleForm'))} variant='contained' color='secondary' size='large' style={{}}>
                                    Save File
                                </Button>
                            </div>
                        </Paper>
                    </Grid>
                </Grid>
            </Grid>
        </Grid>
    );
};

export default SimpleFormPreview;

null

Answer 1

直接在if语句“if（ChildObj.Iconel）”之后修改道具导致应用程序重复地重新呈现。

使用cloneElement我可以使我的元素将原始元素的道具与新的道具简单地合并在一起:reactjs.org/docs/react-api.html#cloneElement错误停止了，我可以实现所需的结果，即更改作为道具向下传递给子元素的按钮的方框阴影onClick。

下面是替换“if（ChildObj.Iconel）”if条件后的行的代码。

null

                                    var clonedElementWithInjectedStyles = React.cloneElement(childObj.iconEl, { style: { ...childObj.iconEl.props.style, boxShadow: childToDisplay.id === childObj.child.id ? 'green 0px 0px 33px 5px' : null } });
                                    return (
                                        <div onClick={() => handleSwitchReview(childObj)} key={idx}>
                                            {clonedElementWithInjectedStyles}
                                        </div>
                                    );