Question

基本上，下面的代码段用于“关闭/编辑”图标：在“关闭”模式下单击后，它将变为“编辑”图标，并在其中输入rowId和“ 1”参数handleEdit功能；并且一旦进入“编辑”模式，它将传递rowId和一个“ 0”参数。

问题在于，尽管它会将editClose === 1更新为editDeleteTag，但它只在1的条件下运行；它似乎永远不会呈现stylesEditOptions图标及其状态。

我是React的新手，所以这里可能会缺少一些东西。

childComponenent.jsx

funcEdit = (editClose) => {
    if (editClose === 0) {

        return (<div className={styles.editOptions}>
            <Input type="button" className={styles.closeIcon} onClick={() => this.props.handleEdit(rowIndex, 1)} />
        </div >)

    } else {
        return (<div className={styles.editOptions}>
            <Input type="button" className={styles.EditIcon} onClick={() => this.props.handleEdit(rowIndex, 0)} />        
        </div >)
    }
}

render()

    let locArr = [...this.state.mainArray];

    For looop .... {
    
        if (locArr[i].editOrDeleteTag === 0) {
            locArr[i].editOrDelete = this.funcEdit(1);    
        } else {
            locArr[i].editOrDelete = this.funcEdit(0);
        }
    }

return(
        ...
        <BootstrapTable data={locArr}
        ...
    )

parentComponent.jsx

    handleEdit = (rowId, toggle) => {
      
    let locArr = [...this.state.mainArray];
    locArr[rowId.rowIndex].editOrDeleteTag = toggle

    this.setState({ mainArray : locArr });

    };

Answer 1

最可能的原因是您正在改变状态。

更改嵌套对象的状态时，您需要更新所有父元素。

因此，在您的handleEdit中尝试使用

locArr[rowId.rowIndex] = { 
  ...locArr[rowId.rowIndex],
  editOrDeleteTag: toggle
};

代替

locArr[rowId.rowIndex].editOrDeleuteTag = toggle;

ReactJS-条件渲染不起作用

1 个答案: