Как добавить компоненты другого класса в значение свойства в состоянии компонентов в Reactjs?

Question

ReactJS: Я пытаюсь сделать <ul> с использованием Reactjs.Я создал 2 компонента, один для отдельных <li>, а другой для <ul>.Я сделал это так, чтобы я мог обрабатывать события / анимации индивидуально для каждого из них.Теперь я хочу хранить каждый <li> компонент в одном свойстве в состоянии <ul> компонент .Я хочу, чтобы это было сделано до монтирования компонента <ul>. Когда компонент <ul> будет отображаться, все компоненты <li> также должны отображаться из состояния <ul> .Как я могу это сделать?

В свойстве <ul> состояния есть несколько <li> компонентов!Предполагается, что они получены с сервера в зависимости от активности клиента в веб-приложении.

---

Я попытался сделать это, создав функцию , которая будет вызывать setState компонента <ul>,и обновите свойство с помощью <li> компонентов. Но при вызове его в render () выдает предупреждение

Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

---

Вот код

//CartItemLI component is the <li>
class CartItemLI extends React.Component {
    constructor(props)
    {
        super(props);

        this.state = {
                     ....
                     ....
        };
    }

    render() 
    {
        return(
                     ....
                     ....
        );
    }
}


// Cart component is the <ul>
class Cart extends React.Component
{
    constructor(props)
    {
        super(props);

        this.state = {
                     ....
                     ....


            //products property should store <CartItemLI />
            products: []
        }
    }

    //I tried invoking initItems() in the render(), but it gives the warning
    initItems() {
        for(var i = 0; i < this.state.numberOfItems; i++)
        {
            var products = this.state.products;

            this.setState((prevState, props) => {
                products: products.push(
                    <CartItemLI ....*props*.... />
                )
            })
        }
    }

    render()
    {

        this.initItems();

        // I want {this.state.products} from state
        return (
            <ul>
                {this.state.products}
            </ul>
        )
    }
}

Answer 1

По сути, что я понимаю из вашего объяснения, что вы хотите все

от компонента CartItemLI, верно?И для всех этих вам нужно кратное число, которое вы хотите передать как реквизиты из компонента CartItemLI?

//CartItemLI component is the <li>
class CartItemLI extends React.Component {
    constructor(props) {
        super(props);

    }
    render() {
        return (
            <li>{this.props.lidata}
                <CartItemUL ulprops={this.props.uldata} />
            </li>
        )
    }
}

//CartItemUL component is the <ul>
class CartItemUL extends React.Component {
    constructor(props) {
        super(props);       
    }
    render() {
        return (
            <ul>{this.props.uldata}</ul>
        )
    }
}

// Cart component is the <ul>
class Cart extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            //products property should store <CartItemLI />
            products: ''
        }
    }
    componentDidMount() {

        var sourceOfLI = require('./sampledata/Blank.json');
        var sourceofUL = require('./sampledata/Blank.json')
        this.setState({
            products: sourceOfLI,
            ulData: sourceofUL
        })
    }

    render() {
        // I want {this.state.products} from state
        return (
            <CartItemLI lidata={this.state.products} uldata={this.state.ulData} />
        )
    }
}

Answer 2

Вам не нужно переводить полностью сформированные компоненты реагирования в состояние, вы можете просто вставить значения для элементов li, достаточно сохранить свойства продукта в состоянии.

Позвольте состоянию сохранять значения и рендерингпроизойдет при рендеринге.

Обработайте рендеринг в методе рендеринга корзины следующим образом:

<ul>
   {this.state.products.map( productProps => <CartItemLI {...productProps} />}
</ul>