组件间传值更新接口重新render新数据

最新推荐文章于 2024-01-02 15:35:39 发布

幸福了，然后呢

最新推荐文章于 2024-01-02 15:35:39 发布

阅读量605

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_42260975/article/details/96477335

本文介绍如何在React应用中，通过组件间传递值来更新接口，从而在子组件B中获取新数据并重新渲染。涉及到的关键步骤包括：1) 子组件A将时间值传递给父组件；2) 父组件再将时间值传递给子组件B；3) 子组件B在`componentWillReceiveProps`或`getDerivedStateFromProps`生命周期方法中监听props变化，根据新时间值重新请求数据并render。文章最后作者期待与社区交流更优实现方式。

通过组件间传值方法更新接口重新render新数据

前提描述：
现有一功能，在子组件A里左右切换选择不同的时间，将选择的时间值传给兄弟组件B，子组件B重新请求接口，获取新数据并重新渲染。

文件分级：
父组件：CarReport.jsx
子组件A：TimeChoose.jsx
子组件B：Day’Operate.jsx

ui图示：
在这里插入图片描述
实现方式：
1.先将子组件A里的时间值传给父组件，父组件在传给子组件B，也就是兄弟组件间的传值(组件间的传值可借鉴上一篇)
2.子组件A切换时间，子组件B获取到新的时间，重新请求接口，这时需要用到一个生命周期函数：componentWillReceiveProps(nextProps){ }

class DayOperate extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            func:this.getReport(this.props.choseTime)    //这是页面初始化时调用函数请求接口
        }
    }

    // 这是子组件A把时间传给当前子组件B时，再次请求接口，需要使用
    componentWillReceiveProps(nextProps){
        if(this.props.choseTime != nextProps.choseTime){
            this.getReport(nextProps.choseTime);   //调用函数，重新请求接口
        }