Блог

У меня есть компонент класса, как показано ниже:

 import React, { Component } from "react";
import Aux from "../../../hoc/Auxilary/Auxilary";
import ComponentDetails from "./SideBarLayoutDetails";
import DropDownDetails from "../UI/DropDown/DropDownDetails";
import Row from "../UI/Row/Row";
import "./Layouts.css";
import Dropdown from "../UI/DropDown/DropDown";
import Calendar from "../UI/Calendar/Calendar";

class SideBarLayout extends Component {

    state = {
        isActive: Array(DropDownDetails.length),
        isDateActive: false,
    }


    DropDownArrowHandler = (index) =>
    {

    }

    render()
    {
        const calendar = this.state.isDateActive ? <Calendar />:null;

        return <Aux>
                <div className = "SideBar-Central">
                                <Row Elems = {ComponentDetails.TopHeaders.elements} 
                                Container = {ComponentDetails.TopHeaders.container}
                                />
                                <Dropdown Elems = {DropDownDetails[0].DateFilter} 
                                Container = {DropDownDetails[0].DateFilterContainer}
                                />
                                {calendar}
                </div>
        </Aux>
    }
}

export default SideBarLayout;
  

Я хочу инициализировать this.state.isActive цикл следующим образом:

 const initializedvalue = DropDownDetails.map(elem => elem.active);
  

а затем используйте это initializedvalue для назначения this.state.isActive .

Но я хочу сделать это только тогда, когда компонент отображается на экране. Каков наилучший способ сделать это? Должен ли я использовать constructor ? Я не предпочитаю это, так как получаю предупреждение об использовании super(props) . Пожалуйста, дайте мне знать, как лучше всего это сделать. Моя конечная цель — иметь this.state.isActive массив, готовый к использованию при принятии решений о рендеринге компонентов экрана.

Во-первых, forEach не возвращает никакого значения, поскольку это функция void. Так что попробуйте вместо этого функцию map. Это вернет элементы, для которых значение active равно true (предполагается active boolean , что это свойство типа в elem )

const initializedvalues = DropDownDetails.map(elem => elem.active);

Далее, если вы хотите использовать это для установки this.state.isActive после рендеринга, запустите его componentDidMount() . Это функция жизненного цикла, которая запускается после завершения первоначального рендеринга.