Question

我将数据从子组件传递到父组件，但未设置状态。当我尝试setState时，它给我一个错误

“超出了最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。”

class Listing extends Component {
    state = {
        list: ''
    }
    update = (data) => {             
        this.setState({list: data }) 
    }
    render() {

        return (
            <Pagination
               data={this.update}
            />
        )
    }
}

import React, { Component } from 'react';

export class Pagination extends Component {
    state = {
        page : this.props.page,
        count : 0,
        perPage: this.props.perPage
    }  
    render() {
        const { page, count, perPage} = this.state
        const dataForParent = Object.values(page).slice(count*perPage, count*perPage+perPage);
        this.props.data(dataForParent)

        return (
            <div className="project-pagination m-top-30">

            </div>
        )
    }
}

Answer 1

使用此代码

class Listing extends Component {
        state = {
            list: {}
        }
        update = (data) => {
            setTimeout(() => {
                this.setState({list: {...data} })
            }, 1000)
        }
        componentDidMount(){
            this.update()
        }
        render() {
            return (
                <Pagination
                    data={this.update}
                />
            )
        }
    }

我如何防止状态更新中的无限循环反应

1 个答案: