React TypeScript:保存一个 base64 字符串以使用 State

Question

>我正在尝试将 base64 字符串保存到状态，但我收到未知类型错误，如何分配类型？

import React, {useState, useRef}  from 'react';

const App: React.FC = () => {
const [state, setState] = useState({country: '', firstName: '', middleInitial: '', lastName: '', dobDay: '', dobMonth: '', dobYear:'', email:'', phoneCode: '', phoneNumber: '', documentCountry: '', documentType: '', frontDoc: '', backDoc: '', selfie: ''});

const toBase64 = (file: any) => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
const setFrontDoc = async(event: any) => {
const file = event.target.files[0];
const frontDoc = await toBase64(file)
setState({...state, frontDoc}); // <========= Error here!
}

错误是

Argument of type '{ frontDoc: unknown; country: string; firstName: string; middleInitial: string; lastName: string; dobDay: string; dobMonth: string; dobYear: string; email: string; phoneCode: string; phoneNumber: string; documentCountry: string; documentType: string; backDoc: string; selfie: string; }' is not assignable to parameter of type 'SetStateAction<{ country: string; firstName: string; middleInitial: string; lastName: string; dobDay: string; dobMonth: string; dobYear: string; email: string; phoneCode: string; phoneNumber: string; documentCountry: string; documentType: string; frontDoc: string; backDoc: string; selfie: string; }>'.
Type '{ frontDoc: unknown; country: string; firstName: string; middleInitial: string; lastName: string; dobDay: string; dobMonth: string; dobYear: string; email: string; phoneCode: string; phoneNumber: string; documentCountry: string; documentType: string; backDoc: string; selfie: string; }' is not assignable to type '{ country: string; firstName: string; middleInitial: string; lastName: string; dobDay: string; dobMonth: string; dobYear: string; email: string; phoneCode: string; phoneNumber: string; documentCountry: string; documentType: string; frontDoc: string; backDoc: string; selfie: string; }'.
Types of property 'frontDoc' are incompatible.
Type 'unknown' is not assignable to type 'string'.ts(2345)

我试过了

const frontDoc: string = await toBase64(file);

但是我收到错误Type 'unknown' is not assignable to type 'string'.

Answer 1

您可以添加为字符串

const frontDoc = await toBase64(file) as string