javascript - TypeError:无法读取未定义的属性“sportId”

我需要隐藏按钮。
它在基于类的代码中工作正常。
但是当我转换为反应挂钩时会抛出错误
TypeError: Cannot read property 'sportId' of undefined
我研究并遵循以下链接步骤。10 Steps to Convert React Class Component to React Functional Component with Hooks
但仍然没有帮助我。
你能告诉我如何解决它吗？
在下面提供我的代码段


反应钩

import React, { useState } from 'react'

import SimpleTabs from './components/SimpleTabs/index';
import Button from '@material-ui/core/Button';
import SideNav from '../SideNav';
import '../../styles.css';
import { withStyles } from '@material-ui/core/styles';

const World = () => {
    const [sportId, setEmail] = useState(window.sessionStorage.getItem('includeFish'));
    const [password, setPassword] = useState('');

    const handleSubmit = event => {
        event.preventDefault();
        // console.log(email);
        // console.log(password);
    }

    return (
        <div>
            <SideNav />

            <div className="World-dockRightContainer">
                <div className="World-heading">
                    Research and World
                        <div className="World-button-container">
                        <Button
                            variant="outlined"
                            color="primary"
                            size="small"
                            className="World-button-World"
                            style={{
                                //display: this.state.paperSelected
                                display: this.state.sportId

                                    ? 'none'
                                    : '',
                            }}
                        >
                            World Fish
                            </Button>

                        <Button
                            variant="outlined"
                            color="primary"
                            size="small"
                            className="World-button-World--active"
                            // disabled={this.state.disableWorldFish}
                            style={{
                                //display: this.state.paperSelected
                                display: !this.state.sportId

                                    ? 'none'
                                    : '',
                            }}
                        >
                            World Fishing(1)
                            </Button>
                    </div>
                </div>

                <SimpleTabs />
            </div>
        </div>
    )
};

export default World;

基于类

import React, { Component } from 'react'; //useState,
import SimpleTabs from './components/SimpleTabs/index';
import Button from '@material-ui/core/Button';
import SideNav from '../SideNav';
import '../../styles.css';
import { withStyles } from '@material-ui/core/styles';
import { connect } from 'react-redux';
import {
    reduxForm,
} from 'redux-form';

//import { WorldActions } from '../../../../actions';



//function World() {

class World extends Component {

    state = {

        paperSelected: false,
        data: '',
        disableWorldFish: true,
        sportId: window.sessionStorage.getItem('includeFish')
    };

    componentWillReceiveProps(nextprops) {
        console.log('index componentWillReceiveProps obj3 -->', nextprops.paperSelected);

    }

    componentDidMount() {
        let { data } = this.props;
        this.setState({ paperSelected: this.props.paperSelected });

    }

    render() {
        //let sportId = window.sessionStorage.getItem('includeFish');


        //return (
        return <div>
            <SideNav />

            <div className="World-dockRightContainer">
                <div className="World-heading">
                    Research and World
                        <div className="World-button-container">
                        <Button
                            variant="outlined"
                            color="primary"
                            size="small"
                            className="World-button-World"
                            style={{
                                //display: this.state.paperSelected
                                display: this.state.sportId

                                    ? 'none'
                                    : '',
                            }}
                        >
                            World Fish
                            </Button>

                        <Button
                            variant="outlined"
                            color="primary"
                            size="small"
                            className="World-button-World--active"
                            // disabled={this.state.disableWorldFish}
                            style={{
                                //display: this.state.paperSelected
                                display: !this.state.sportId

                                    ? 'none'
                                    : '',
                            }}
                        >
                            World Fishing(1)
                            </Button>
                    </div>
                </div>

                <SimpleTabs />
            </div>
        </div>;
    }
    //);
}



export default World;

最佳答案

在挂钩示例中，您忘记了更新使用变量的行

display: !this.state.sportId

需要简单地

display: !sportId

关于javascript - TypeError:无法读取未定义的属性“sportId”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57340059/