元素 ref 被指定为字符串 (wrappedInstance)，但未设置所有者在 Netlify CMS 自定义小部件中连接到 Redux 商店

编程问答 2022-05-02

问题描述

我正在尝试为 Netlify CMS 创建一个自定义小部件，该小部件连接到 Redux 存储以在文件小部件具有新路径时进行更新。然后我的小部件将确定文件的大小以设置它自己的值。

到目前为止，我只是简单地克隆了 starter widget 并将 src/Conrol.js 更改为：

import React from 'react';
import { connect } from 'react-redux' //Added this line

class Control extends React.Component {
    static propTypes = {
        onChange: PropTypes.func.isrequired,forID: PropTypes.string,value: PropTypes.node,classNameWrapper: PropTypes.string.isrequired,}

static defaultProps = {
    value: '',}

render() {
    const {
        forID,value,onChange,classNameWrapper,} = this.props;

    return (
        <input
        type="text"
        id={forID}
        className={classNameWrapper}
        value={value || ''}
        onChange={e => onChange(e.target.value)}
/>
);
}
}

//Added everything below

const mapStatetoProps = (state,ownProps) => {
    const fileUrl = "test";
    return { value: fileUrl };
};

export default connect(mapStatetoProps,null,{ withRef: true })(Control);

通过这些更改，我收到以下错误：

元素引用被指定为字符串 (wrappedInstance) 但没有所有者 被设置。这可能是由于以下原因之一造成的： 1. 您 可能正在向功能组件 2 添加 ref。您可能正在添加 引用不是在组件的渲染中创建的组件 方法 3. 你加载了多个 React 副本 参见 https://reactjs.org/link/refs-must-have-owner 了解更多信息。

我不知道我做错了什么。至于错误中给出的原因：

  1. 我正在处理一个类组件。
  2. 我什至没有接触组件渲染。我只添加了connect()。
  3. 我按照错误中提供的链接的建议运行了 npm ls react。我收到了两份 react，但一份被“重复数据删除”了。

我四处寻找答案，但没有找到。我是 React/redux 的新手，所以我希望有人能指出我正确的方向。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptnetlify-cmsreact-reduxreactjsreactjsreactjsreactjs