React Semantic UI复选框根据选中状态跳转不同URL的实现问题

原有代码问题梳理 #

• 同时绑定onClick和onChange两个触发状态变更的事件，逻辑重复容易引发执行冲突
• onChange跳转逻辑写死，未根据复选框状态匹配对应跳转地址
• checked属性绑定值为!this.state.status，和state中定义的status逻辑相反，会导致状态判断出错
• componentDidUpdate生命周期参数命名错误，该周期接收的前两个参数是更新前的props、state，不是nextProps、nextState，容易引发逻辑错误

修复后完整代码 #

import * as React from "react";
import { Checkbox } from "semantic-ui-react";
import { withRouter, RouteComponentProps } from "react-router-dom";

// 不需要react-router路由跳转的话可以删掉 & RouteComponentProps
type Props = {
    label: string;
} & RouteComponentProps;

type State = {
    status: boolean;
};


class OrderCatalog extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            status: false
        };
    }

    componentDidMount() {
        const status = localStorage.getItem("status");
        this.setState({ status: status === "true" ? true : false });
    }

    componentDidUpdate(prevProps: Props, prevState: State) {
        // 仅在status状态变更时执行写入和跳转逻辑，避免无效执行
        if (prevState.status !== this.state.status) {
            localStorage.setItem("status", String(this.state.status));
            // 根据状态匹配跳转地址
            const targetUrl = this.state.status ? '/link/newlink' : '/link/anotherlink';
            // 不需要整页刷新就用react-router的无刷新跳转，否则直接用window.location.href = targetUrl
            this.props.history.push(targetUrl);
        }
    }

    handleChange = () => {
        this.setState(prevState => ({ status: !prevState.status }));
    }

    render() {
        return (
            <Checkbox
                onChange={this.handleChange}
                label={this.props.label}
                checked={this.state.status}
                toggle
            />
        );
    }
}

// 不需要react-router跳转的话直接导出OrderCatalog即可
export default withRouter(OrderCatalog);

修改说明 #

• 移除了冗余的onClick事件，状态变更统一通过onChange触发
• 跳转逻辑移到componentDidUpdate中执行，确保是在状态更新完成后再做判断，避免异步更新导致取到旧状态出错
• 补充了状态变更判断，避免不必要的localStorage写入和跳转触发
• 修正了checked属性的绑定逻辑，和state定义的status保持一致
• 跳转逻辑根据最新的status值动态匹配：状态为true时跳转/link/newlink，状态为false时跳转/link/anotherlink

内容的提问来源于stack exchange，提问作者HotWheels