javascript - objektet är möjligen 'null' i typescript

interface IRoleAddProps {
    roles: Array<IRole>
}
interface IRoleAddState {
    current: IRole | null
}
class RoleAdd extends React.Component<IRoleAddProps, IRoleAddState> {
    state = {
        current: null,
    }
    renderNoneSelect = () => {
        return (
            <div styleName="empty">
                <SvgIcon name="arrow" styleName="icon-arrow" />
                <span>Empty</span>
            </div>
        )
    }
    onRoleClick = (role: IRole) => {
        this.setState({
            current: role,
        })
    }
    render() {
        const { roles } = this.props
        const current = this.state.current

        return (
            <div styleName="role-add">
                <div styleName="role-list">
                    <div styleName="title">Select role:</div>
                    <div styleName="list">
                        {roles.map(role => {
                            const cls = classNames({
                                item: true,
                                active: current && ( current.id === role.id )
                            })

                            return (
                                <div
                                    key={role.id}
                                    styleName={cls}
                                    className="g-text-inline"
                                    onClick={this.onRoleClick.bind(this, role)}
                                >
                                    <CheckBox />
                                    <span>{role.name}</span>
                                </div>
                            )
                        })}
                    </div>
                </div>
                <div styleName="view">
                    {!current && this.renderNoneSelect()}
                    {current && 'view'}
                </div>
            </div>
        )
    }
}

export default RoleAdd

Koden är sådan här, men TS säger fortfarande till mig:

Till och med jag försökte:

Och "!" fungerar inte heller

Som du kan se kan inte objektet "current" vara null eftersom jag har en nullkontroll innan jag använder det.

Men TypeScript-motorn visar fortfarande det felet för mig.

Jag undrar om det är för att jag initialiserade det aktuella objektet med värdet null, men TS kan inte lista ut typerna från setState, så det tar alltid current som null?

Svar #1

Du behöver tilldela en typ till state, som

state: IRoleAddState = {
    current: null
};

Då kommer state att vara av typen IRoleAddState och inte { current: null }. Efter det kommer de metoder du försökte använda att fungera.

Svar #2

Att explicit definiera tillståndet i en konstruktor bör lösa problemet.

constructor(props) {
    super(props);

    this.state = {
        current: null;
    }
}

Relaterade artiklar