如何解决元素 ref 被指定为字符串 (wrappedInstance),但未设置所有者在 Netlify CMS 自定义小部件中连接到 Redux 商店
我正在尝试为 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 了解更多信息。
我不知道我做错了什么。至于错误中给出的原因:
我四处寻找答案,但没有找到。我是 React/redux 的新手,所以我希望有人能指出我正确的方向。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。