TypeScript 中的 useState 和 useContext

Question

使用 useState，我想创建一个我将在（可能很远 ^^）将来继续获取的对象。

代码将作为一个表单，将在多个子页面上，每个子页面为对象提供不同的数据，最终将提取到数据库中。

理论上，我可以结合使用 useState 和 useContext，不幸的是我得到了错误

Type '{}' must have a '[Symbol.iterator] ()' method that returns an iterator.ts (2488)

formContext.ts

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

export const FormContext = createContext({});

export const FormProvider: React.FC = props => {
  const [formData, setFormData] = useState({ title: '' });
  return <FormContext.Provider value={[formData, setFormData]}>{props.children}</FormContext.Provider>;
};

ServiceBoxGenerator.ts

import React, { useContext } from 'react';

//Component Import
import { ServiceBox } from './ServiceBox/ServiceBox';
import { ProcedureBox } from './ProcedureBox/ProcedureBox';
//Context Import
import { ServiceContext } from '../../App';
import { FormContext } from '../../utils/formContext';

export const ServiceBoxesGenerator: React.FC = () => {
  const { data } = useContext(ServiceContext);
  const dataArray = data;
  const [formData, setFormData] = useContext(FormContext);
  if (formData.title) {
    const searchedObject = dataArray.find(x => x.title === formData.title);
    const procedureObject = searchedObject?.services;
    return (
      <>
        {procedureObject?.map(data => {
          return <ProcedureBox key={data.id} icon={data.icon} title={data.title} description={data.description} price={data.price} />;
        })}
      </>
    );
  }
  return (
    <>
      {dataArray.map(data => {
        return (
          <div
            key={data.id}
            onClick={() => {
              setFormData({ title: data.title });
            }}
          >
            <ServiceBox key={data.id} icon={data.icon} title={data.title} serviceAmount={data.amount} />
          </div>
        );
      })}
    </>
  );
};

我正在寻求帮助并提示我做错了什么，因为我不知道我可以改变什么来让它工作。

或者有人有另一种方法来创建这样的对象，我不坚持使用 useState 和 useContext。

非常感谢您的帮助，祝您有愉快的一天；）

Answer 1

那是因为createContext({})中{}的类型与[formData, setFormData]的类型不匹配。

消除此错误的简单方法是像这样指定上下文类型：

export const FormContext = createContext<[{ title: string },React.Dispatch<React.SetStateAction<{
  title: string;
}>>]>({} as any);

TypeScript 中的 useState 和 useContext

useState and useContext in TypeScript

forms

typescript

tslint

use-state

use-context