Question

我有一个数据表列表。在数据表中，我有数据存入某个设备。每当我单击ID时，我都会打开一个侧边栏，其中显示一些数据。我面临的问题是第一次调用ID的ID的onclick会获取数据并正确显示。但是，关闭侧边栏后，当我再次单击ID时，它不会加载任何内容（不调用API）。

我无法为此创建代码笔，但是下面是我的代码。

我的代码-

onCLick ID-

_onClickCompliance(deviceId);

const _onClickCompliance = deviceId => {
    ReactDOM.render(
        <ComplianceDetails deviceId={deviceId} />,
        document.getElementById("ComplianceDetailsModalDiv")
    );
};

内部ComplianceDetails组件-第一次onClick进入componentDidMount内，但再次单击则没有。这就是为什么我要为此componentDidUpdate。如果我删除了此componentDidUpdate，则总是在点击表中ID后总是将旧数据加载到侧栏中。

`getDetailsByDeviceID` this is called to get the data from API and sets value in state

我的代码-

    componentWillReceiveProps() {
        this.setState({ sideBarShow: true });
    }

    componentDidMount = () => {
        this.getDetailsByDeviceID();
    };

    componentDidUpdate(prevProps) {
        if (this.props.deviceId !== prevProps.deviceId) {
            this.getDetailsByDeviceID();
        }
    }

getDetailsByDeviceID代码-

getDetailsByDeviceID = () => {
        try {
            this._getComplianceDetailsApi(); //apis
        } catch (err) {
            toast({
                message: err,
                flavor: "error",
                options: { isHtml: true }
            });
        }
    };

如果我删除它，它将无限期地调用该页面。

if (this.props.deviceId !== prevProps.deviceId)

我必须打componentWillUnmount()吗？请引导我。

让我知道是否不清楚。谢谢。

Answer 1

如果您希望在更改<plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.5.1</version> <configuration> <source>1.8</source> <target>1.8</target> </configuration> </plugin>后重新安装组件，可以在deviceId上使用key道具，如下所示：

ComplianceDetails

在重新加载组件时未调用React componentDidMount

1 个答案: