useContext的使用

佚名 6年前 (2019-05-08) 随笔 1286人围观抢沙发百度已收录

场景：在一个动态生成的多个组件里面，可能一个组件依赖于另一个组件的值而变化

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

我们首先想到的是redux，这一个可以保存供多个组件使用的解决方案

方法：创建我们自己的reducer，使用useContext提供使用

const { PageData, activeComponent } = useContext(PageContext);

在具体的场景里面，我的PageData存储的页面信息，activeComponent当前选中的页面组件的索引

不出所料，我们果然可以正确使用，

bug：但是，在拉入下一个组件的时候，报错如下

Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks

百度之后https://stackoverflow.com/questions/53472795/uncaught-error-rendered-fewer-hooks-than-expected-this-may-be-caused-by-an-acc发现元问题出现的原因：

我们的组件动态生成是存在判断条件的，也就是通过判断组件的type属性选择对应的组件

switch (type) {
        case 'Array':
            EditorComp = () => {
                return <React.Fragment>{UseArrInput(props, value, handleChange)}</React.Fragment>;
            };
            break;
        case 'Object':
            EditorComp = () => {
                return <React.Fragment>{UseObjectInput(props, value, handleChange)}</React.Fragment>;
            };
            break;
        default:
            EditorComp = () => {
                return <React.Fragment>{Editor(props, value, handleChange)}</React.Fragment>;
            };
            break;
    }