ReactDOM.render 问题

Question

与 ReactDOM.render

有一个奇怪的错误

在我的 ListItem 组件中，我有 2 个调用 ReactDom.render:

的函数

    showDetails()
    {
        var popup = document.getElementById("itemPopup")
        popup.style.display = "block"
        ReactDOM.render(<ItemDetails data={this.props.itemData[1]}/>, popup)
    }

和

    editItem()
    {
        var popup = document.getElementById("itemPopup")
        popup.style.display = "block"
        ReactDOM.render(
            <EditItem 
                itemID={this.props.itemData[0]}
                itemData={this.props.itemData[1]}
                updateItem={(id, data)=>this.props.itemEdited(id, data)}
        />, popup)
    }

showDetails 在被调用时工作正常，但是 editItem 显示它被调用的第一个项目，而不管哪个 listItem 对象调用它。唯一一次更改是在调用 showDetails 时，然后下一个 editItems 调用显示正确的项目

在此先感谢您对修复此错误的任何帮助

Answer 1

通过添加

解决了问题

ReactDOM.unmountComponentAtNode(popup)

就在 reactDOM.render()

之前

完整代码：

    editItem()
    {
        var popup = document.getElementById("itemPopup")
        popup.style.display = "block"
        ReactDOM.unmountComponentAtNode(popup)
        ReactDOM.render(
            <EditItem
                itemID={this.props.itemData[0]}
                itemData={this.props.itemData[1]}
                updateItem={(id, data)=>this.props.itemEdited(id, data)}
        />, popup)
    }

ReactDOM.render 问题

ReactDOM.render issue

reactjs

react-dom