React 父组件触发事件后如何卸载并重新加载子组件?

Question

问题描述

比较大众的一种情况: 父组件更新render会导致子组件也重新render

但是现在有一个比较特殊的要求: 父组件上有一个刷新实时数据的按钮, 我希望当我点击刷新的时候能够卸载掉这个子组件并重新装载。这样就能初始化子组件的state值.

问题出现的环境背景及自己尝试过哪些方法

具体来说就是, 子组件初次渲染的时候改变了自身state的值, 而state里面有一个数组参数array我用作判断某些事件, 一开始为空, 会不断填充一些值, 而我通过array.includes(xxx) && ...来触发一些事件, 当我点击刷新按钮的时候, 如果我不清空state的值, 就永远无法触发&&后面的事件, 导致无法实时更新数据

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
我简单模拟一下情景

//父组件
const { datasource } = this.state;
render(){
    ...
    return(
       <ChildComp data={datasource}></ChildComp>
    )
}

//子组件
class ChildComp extends PureComponent{
    constructor(arg){
        super(arg)
        
        this.state = {
            type: []
        }
    }
    
    componentDidMount(){
        this.handleData();
    }
    
    componentWillProps(){
        this.handleData();
    }
    
    handleData(){
        const { type } = this.state;
        const { data } = this.props;
        
        !type.includes(data.type) && type.push(data.type) && ...更新数据 
    }
}

当我首次加载的时候, 已经给子组件ChildComp填充了数据, 父组件刷新触发子组件willProps重新render的时候, this.state.type的值已经存在data.type, 导致无法触发后续操作, 请问有什么解决方法吗？

你期待的结果是什么？实际看到的错误信息又是什么？

是否存在一个在父组件里可以重新装载子组件的操作?

//刷新
handleRefresh(){
    //重新挂载<ChildComp />
}

或者有什么更好的办法解决呢？

谢谢！

Answer 1

我整理一下逻辑，你希望父组件数据变化的时候子组件能够获取到父组件变化的数据，然后整合到子组件的 state 里面，触发子组件重新渲染。
解决方案：

• construct 的时候讲 props 数据整合到 state
• componentWillReceiveProps 再次整合到 state

我对你代码有几个不明白的地方

1. componentWillProps 是什么方法？是 componentWillReceiveProps？ 如果是，handleData 中不应该用 this.props
2. componentWillReceiveProps 为啥不用

Answer 2

考虑得太多了。后面不用数组方式传值, 该用{}代替push等数组方法, 逻辑相对地简洁多了。

Answer 3

有一个生命周期叫做 shouldComponentUpdate 不知道可不可以解决你的问题

Answer 4

给子组件设置个key 需要卸载子组件的时候将key换个值 但我觉得你的问题不应该用卸载子组件来实现的样子