Реквизиты пусты при передаче их компонентам на основе дочерних классов при заполнении при использовании функционального компонента - PullRequest
Новая
       53

Реквизиты пусты при передаче их компонентам на основе дочерних классов при заполнении при использовании функционального компонента

0 голосов
/ 09 февраля 2020

Кажется, что реквизиты не передаются дочернему компоненту, когда мой дочерний компонент является компонентом класса. Это мой родительский компонент: 

class ScreeningsList extends React.Component{
    state = {screenings: [] };

    componentDidMount = async () => {
        const response = await apis.getAllScreenings();
        this.setState({screenings: response.data});
    }

    render(){
        return (
            <div>
                <ScrTest screeningsList = {this.state.screenings}/>
            </div>
        )
    }
}

А вот мой дочерний компонент: 

class ScrTest extends React.Component{

    render(){
        return (
            <div className="screeningsContainer">
                <h2>Title: {this.props.screeningsList._id}</h2>
            </div>
        )
    }
}

Здесь я попытался просто показать идентификатор скрининга. Значение в реквизите не существует. Там не было никакого реквизита вообще. Однако, когда я использую функциональный компонент и использую функцию стрелки: 

const ScreeningsToRender = props => {
...
}

, я могу получить доступ к реквизитам с помощью props.screeningsList и использовать каждое значение, которое находится внутри этого реквизита. Рендеринг компонента успешен, и я могу видеть список всех просмотров. Что я должен сделать, чтобы правильно получить реквизит в моем дочернем компоненте?

1 Ответ

0 голосов
/ 09 февраля 2020

Вам нужен конструктор в дочернем компоненте: 

class ScrTest extends React.Component{

    constructor(props){
       super(props);
    }

    render(){
        return (
            <div className="screeningsContainer">
                <h2>Title: {this.props.screeningsList._id}</h2>
            </div>
        )
    }
}

"При реализации конструктора для подкласса React.Component вы должны вызывать super (props) перед любым другим оператором. В противном случае this.props будет неопределенным в конструкторе ". Источник : https://reactjs.org/docs/react-component.html#constructor

...