React状态一直重置为初始状态

Question

我目前正在我的网站上的移动签名功能。我有三个组件我正在处理:form .js(父，使用Formik的形式)，Admin.js(窗体的子)和Signature.js (Admin的子)。

当您在纵向模式下到达此页面(表单的管理部分)时，它会显示一条消息，让您将手机横向转向签名。当你转向横向时，会弹出一个按钮:"点击这里签名"。当你点击它，一个全屏的材料界面对话框弹出一个签名画布(反应签名画布)。你签名，然后点击"保存并关闭"关闭全屏对话框，然后点击"保存签名"将签名保存到你的个人资料。

使用断点，我发现当你在对话框中单击"保存并关闭"以关闭它时，状态被正确地保存为签名。但是当你在表单的Admin部分点击"Save Signature"时，状态已经重置为null的初始状态。

我相信解决方案是使用forwardRef钩子，但问题是我看到的大多数例子都是将引用从一个组件转发到另一个组件，我认为我需要让它通过一个额外的组件，我的组件是结构化的(从签名传递->给行政——>形式)。我需要从Signature.js到Form.js的signatureccanvas (react-signature-canvas)的ref .以下是每个文件的相关信息:

Signature.js

const Signature = forwardRef((props, ref) => {
return (
<SignatureCanvas
backgroundColor="transparent"
canvasProps={{
width: mobileWidth,
height: mobileHeight - 60,
className: 'sigCanvas',
}}
penColor="black"
ref={ref}
/>
);
};

Admin.js

const Admin = () => {
const { values } = useFormikContext();
const signatureRef = useRef(null);
return (
<Signature values={values} ref={signatureRef} />
);
};

Form.js

const Form = () => {
const { values } = useFormikContext();
const signatureRef = useRef(null);
return (
<Admin ref={signatureRef} />
);
};

我研究并认为也许我需要使用useCallback钩子而不是转发ref或使用refs，但不确定如何实现，如果这是正确的解决方案。我也试过在表单组件中设置状态，并将其传递给Admin，然后传递给签名，但没有任何运气。任何帮助将非常感激!

Answer 1

我不确定这是否会解决您的问题，但您可以通过多次使用forwardRef将refs传递几个组件。

我创建了一个示例来展示这一点，您可以在CodePen上查看。

const DeeplyNestedComponent = forwardRef((_, ref) => <input ref={ref} />);
const NestedComponent = forwardRef((_, ref) => (
<DeeplyNestedComponent ref={ref} />
));
const BaseComponent = () => {
const [inputValue, setInputValue] = useState('');
const ref = useRef();
return (
<>
<p>Last input value: "{inputValue}"</p>
<NestedComponent ref={ref} />
<button onClick={() => setInputValue(ref.current.value)}>
Read input
</button>
</>
);
};