Javascript 将道具从父组件发送到子组件，并在子组件（ReactJs）中更新道具

我正在尝试使用ReactJs发出的API请求的响应进行分页。我有一个Main.js页面，它向子组件PageButtons.js发送道具。一切都进展顺利，我通过控制台记录我传递的值的this.props检查了这一点。 问题是我需要更新道具的状态，我需要更新父组件Main.js的状态。我使用它来增加fetch API请求的limit和offset的值，具体取决于我刚才单击的按钮，但这不会发生…：

这个问题需要更多的细节，比如fetch响应的数组

我将在这里留下Main.js代码不包括导入：

export class Main extends React.Component {

    constructor(props) {
        super(props);
    this.state = {
        token: {},
        isLoaded: false,
        models: [],
        offset: offset,
        limit: limit
    };
}

componentDidMount() {

    /* here is other two fetches that ask for a token */

    fetch(url + '/couch-model/', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'Authorization': 'JWT ' + (JSON.parse(localStorage.getItem('token')).token)
        }
    }).then(res => {
        if (res.ok) {
           return res.json();
       } else {
            throw Error(res.statusText);
       }
    }).then(json => {
    this.setState({
            models: json.results
        }, () => {});
   })
}


render() {

    const { isLoaded, models } = this.state;

    if (!isLoaded) {
        return (
            <div id="LoadText">
                Estamos a preparar o seu sofá!
            </div>
        )
    } else {

        return (
            <div>

               {models.map(model =>
                    <a href={"/sofa?id=" + model.id} key={model.id}>
                        <div className="Parcelas">
                            <img src={model.image} className="ParcImage" alt="sofa" />
                            <h1>Sofá {model.name}</h1>

                            <p className="Features">{model.brand.name}</p>

                            <button className="Botao">
                                <p className="MostraDepois">Ver Detalhes</p>
                                <span>+</span>
                            </button>
                            <img src="../../img/points.svg" className="Decoration" alt="points" />
                        </div>
                    </a>
                )}

                 <PageButtons limit={limit} offset={offset}/>

            </div>
        )
    }
}

}

现在是PageButtons.js代码：

export class PageButtons extends React.Component {

    ButtonOne = () => {
        let limit = 9;
        let offset = 0;
        this.setState({
            limit: limit,
            offset: offset
        });
    };

    ButtonTwo = () => {
        this.setState({
            limit: this.props.limit + 9,
            offset: this.props.offset + 9
        });
    };

    render() {

        console.log('props: ', this.props.limit + ', ' + this.props.offset);

        return (
            <div id="PageButtons">
                <button onClick={this.ButtonOne}>1</button>
                <button onClick={this.ButtonTwo}>2</button>
                <button>3</button>
                <button>></button>
            </div>
        )
    }

}

---

将以下方法添加到Main.js

fetchRecords = (limit, offset) => {
    // fetch call code goes here and update your state of data here
}


handleFirstButton = (limit, offset) => {
    this.setState({limit : limit, offset: offset})
    this.fetchRecords(limit, offset)
}

handleSecondButton = (limit, offset) => {
    this.setState({limit: limit, offset : offset})
    this.fetchRecords(limit, offset)
}

Main.js渲染方法更改：

<PageButtons 
    limit={limit} 
    offset={offset} 
    handleFirstButton={this.handleFirstButton} 
    handleSecondButton={this.handleSecondButton}/>

---

“handleSecondButton”不是defined@javedjust在您的props声明中添加this.handleSecondButton。没有任何更改，仍然不会在propscan上执行增量。您只需将控制台日志放在main.js的呈现方法中，并打印限制和偏移量。很抱歉，它在父级更新了！但它不会重新提交新的请求

ButtonOne = () => {
    let limit = 9;
    let offset = 0;
    this.props.handleFirstButton(limit, offset);
};

ButtonTwo = () => {
    let {limit, offset} = this.props;
    limit += 9;
    offset += 9;
    this.props.handleSecondButton(limit, offset);
};