React TypeScript:将base64字符串保存为useState

时间:2019-09-18 04:54:17

标签: reactjs typescript

我正在尝试保存一个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'.

1 个答案:

答案 0 :(得分:0)

您可以添加作为字符串

const frontDoc = await toBase64(file) as string